実際、これはCSS3変換属性アニメーション属性の単純なアプリケーションです。Webページ平面に6つの面（div）を作成し、これらの6つの面を一定の速度で回転させて、3Dの感覚を作成します。ウェイのウェブページで何をすべきだと思いますか？最も簡単なのは、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画像表示：
