效果:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>正方体旋转动画</title>
<style>
*{
margin:0 auto;
padding:0;
}
html{
background:#222;
}
div.wrap{
width:200px;
perspective:1000px;/*景深*/
position:absolute;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);/*利用位移来处理垂直水平居中*/
}
.wrap>div.cube{
margin: 0 auto;
width:200px;
height:200px;
position:relative;
transform-style: preserve-3d;
transform:rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);/*旋转*/
animation:move 8s infinite linear;/*动画*/
}
/*关键帧*/
@keyframes move{
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube>div{
width:100%;
height:100%;
border-radius:20px;
position:absolute;
box-shadow:0 0 10px currentColor;/*currentColor关键字的使用值是 color 属性值的计算值*/
transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;/*过渡 属性 时间 过渡曲线*/
}
.cube:hover>div{
background:currentColor;
box-shadow:0 0 20px currentColor;
}
.cube div.out-front{
color: deeppink;
transform:translateZ(100px);/*转换 位移*/
}
.cube div.out-back{
color: seagreen;
transform:translateZ(-100px) rotateY(180deg);/*转换 位移 旋转*/
}
.cube div.out-left{
color: skyblue;
transform:translateX(-100px) rotateY(-90deg);
}
.cube div.out-right{
color: lightcoral;
transform:translateX(100px) rotateY(90deg);
}
.cube div.out-top{
color: mediumseagreen;
transform:translateY(-100px) rotateX(90deg);
}
.cube div.out-bottom{
color: dodgerblue;
transform:translateY(100px) rotateX(-90deg);
}
.cube img.pic{
width:200px;
height:200px;
}
</style>
</head>
<body>
</div>
<div class="wrap">
<div class="cube">
<div class="out-front"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp" class="pic"></div>
<div class="out-back"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp" class="pic"></div>
<div class="out-left"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube03.bmp" class="pic"></div>
<div class="out-right"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube04.bmp" class="pic"></div>
<div class="out-top"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube05.bmp" class="pic"></div>
<div class="out-bottom"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube06.bmp" class="pic"></div>
</div>
</div>
</body>
</html>