CSS变形、动画实现的旋转魔方
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>魔方</title>
<style type="text/css">
body{
height: 100vh;
width: 100vw;
/* background-image: url(../img/rubick.jpeg); */
margin: 0;
padding: 0;
}
#cube{
width: 300px;
height: 300px;
position: absolute;
top: 50%;
margin-top: -150px;
left: 50%;
margin-left: -150px;
transform-style: preserve-3d;
animation: run 10s linear infinite;
}
#cube > div{
width: 300px;
height: 300px;
position: absolute;
opacity: 0.7;
}
#box1{
background-color: green;
transform:rotateX(90deg) translateZ(150px);
}
#box2{
background-color: red;
transform:rotateX(-90deg) translateZ(150px);
}
#box3{
background-color: blue;
transform:rotateY(90deg) translateZ(150px);
}
#box4{
background-color: yellow;
transform:rotateY(-90deg) translateZ(150px);
}
#box5{
background-color: pink;
transform:translateZ(-150px);
}
#box6{
background-color: orange;
transform:translateZ(150px);
}
@keyframes run{
from{
transform: rotateX(0) rotateY(0);
}
to{
transform: rotateX(360deg) rotateY(360deg);
}
}
div img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="cube">
<div id="box1">
<img src="../img/1.jpg" >
</div>
<div id="box2">
<img src="../img/2.jpg" >
</div>
<div id="box3">
<img src="../img/3.jpg" >
</div>
<div id="box4">
<img src="../img/4.jpg" >
</div>
<div id="box5">
<img src="../img/5.jpg" >
</div>
<div id="box6">
<img src="../img/6.jpg" >
</div>
</div>
</body>
</html>效果图：
相关推荐
tianzyc 2020-02-19
sunshineboyleng 2020-07-08
impress 2020-05-11
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
福叔 2020-04-11
zjuwangleicn 2020-03-08
冰蝶 2020-03-01
somboy 2020-02-29
zengni 2020-02-23
wangjie 2020-02-22
冰蝶 2020-02-16
lanzhusiyu 2020-02-03
lanzhusiyu 2020-01-12
MaureenChen 2020-01-01
jiedinghui 2019-12-27
zhanghao 2019-12-20
bertzhang 2019-12-14
impress 2019-12-13