其实这个就是对CSS3 transform 属性animation属性的一个简单的应用，在网页平面中创建6个面（div），让这6个面匀速的不停的旋转，要创造出来一个3d的感觉，在一个2维的网页平面上，你觉得应该怎么做呢？最直接的就是让它们在Z轴上有东西。下面这6张图片，是我随便找的狐妖小红娘中的图片，大小不是200px 200px的，我在图片属性上加了点东西，效果还不错。
代码：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>旋转魔方test</title>
<link rel="icon" href="img/qisui.ico">
<style type="text/css">
html {
perspective: 888px; /*设置元素被查看位置的视图： 设置了这个才有后面的3d效果*/
}
.club-wrapper {
width: 200px;
height: 200px;
/*background-color: #f10215;*/
/*开启它的相对定位 让它的子元素参照它 绝对定位*/
position: relative;
margin: 333px auto;
/*设置3d变形效果*/
transform-style: preserve-3d;
animation: run 15s infinite linear;
}
/*设置club-wrapper下的所有的div的样式 给他们宽度和透明效果*/
.club-wrapper > div {
width: 200px;
height: 200px;
opacity: 0.7;
position: absolute;
}
img {
vertical-align: top;
width: 200px;
height: 200px;
background-size: contain;
}
/*创建关键帧 */
@keyframes run {
from {
transform: rotateX(0) rotateZ(0);
}
to {
transform: rotateX(1turn) rotateZ(1turn);
}
}
/*设置6个面的旋转 自己想象一下 空间中有6个面 这六个面最初都是贴在网页平面的 然后经过变幻 到6个位置*/
.box1 {
transform: rotateY(90deg) translateZ(100px);
}
.box2 {
transform: rotateY(-90deg) translateZ(100px);
}
.box3 {
transform: rotateX(90deg) translateZ(100px);
}
.box4 {
transform: rotateX(-90deg) translateZ(100px);
}
.box5 {
transform: rotateY(180deg) translateZ(100px);
}
.box6 {
transform: rotateY(0deg) translateZ(100px);
}
</style>
</head>
<body>
<!--创建一个外层的容器-->
<div class="club-wrapper">
<div class="box1">
<img src="img/111.jpg">
</div>
<div class="box2">
<img src="img/222.jpg">
</div>
<div class="box3">
<img src="img/333.jpg">
</div>
<div class="box4">
<img src="img/444.jpg">
</div>
<div class="box5">
<img src="img/555.jpg">
</div>
<div class="box6">
<img src="img/666.jpg">
</div>
</div>
</body>
</html>
效果：点我（服务器没过期之前可以看）
gif图片展示：
