參考：https://www.cnblogs.com/zhangnan35/p/10709876.html
https://www.cnblogs.com/zyrblog/p/11142624.html
translate三維坐標圖：
rotate判斷：
正向軸對着眼睛，順時針則旋轉角度為正，逆時針則旋轉角度為負。
或者用左手法則也行：伸出左手，大拇指指向正軸方向，四個手指的指向即是旋轉正向，但務必記住是左手！
注：rotate后三維坐標軸也會跟着改變
例——正方體相冊
效果：
html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link type="text/css" href="css/1.css" rel="stylesheet ">
<title>旋轉立方體相冊</title>
</head>
<body>
<div id="react">
<div class="out_front">
<img src="img/1.jpg" class="out_pic">
</div>
<div class="out_back">
<img src="img/2.jpg" class="out_pic">
</div>
<div class="out_left">
<img src="img/3.jpg" class="out_pic">
</div>
<div class="out_right">
<img src="img/4.jpg" class="out_pic">
</div>
<div class="out_top">
<img src="img/5.jpg" class="out_pic">
</div>
<div class="out_bottom">
<img src="img/1.jpg" class="out_pic">
</div>
<span class="in_front">
<img src="img/2.jpg" class="in_pic">
</span>
<span class="in_back">
<img src="img/3.jpg" class="in_pic">
</span>
<span class="in_left">
<img src="img/4.jpg" class="in_pic">
</span>
<span class="in_right">
<img src="img/5.jpg" class="in_pic">
</span>
<span class="in_top">
<img src="img/1.jpg" class="in_pic">
</span>
<span class="in_bottom">
<img src="img/2.jpg" class="in_pic">
</span>
</div>
</body>
</html>
1.css:
* { padding: 0; margin: 0; } body { width: 100%; height: 100%; perspective: 500px;//元素被查看位置的視圖,值越大，代表“眼睛離觀察物越遠”，值越小，代表“眼睛越靠近觀察物” background: linear-gradient(darkred 0%, black 100%); } #react { width: 200px; height: 200px; margin: 200px auto; transform-style: preserve-3d;//支持3d圖像顯示 animation: rotate 20s infinite; animation-timing-function: linear; } #react div { position: absolute; transition: all .4s; } div .out_pic { width: 200px; height: 200px; opacity: 0.9; } div .in_pic { width: 100px; height: 100px; } #react span { display: block; position: absolute; width: 100px; height: 100px; top: 50px; left: 50px; } @keyframes rotate { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } .out_front { transform: translateZ(100px); } .out_back { transform: translateZ(-100px); } .out_left { transform: rotateY(90deg) translateZ(100px); } .out_right { transform: rotateY(-90deg) translateZ(100px); } .out_top { transform: rotateX(90deg) translateZ(100px); } .out_bottom { transform: rotateX(-90deg) translateZ(100px); } .in_front { transform: translateZ(50px); } .in_back { transform: translateZ(-50px); } .in_left { transform: rotateY(90deg) translateZ(50px); } .in_right { transform: rotateY(-90deg) translateZ(50px); } .in_top { transform: rotateX(90deg) translateZ(50px); } .in_bottom { transform: rotateX(-90deg) translateZ(50px); } /*外面的圖片散開*/ #react:hover .out_front { transform: translateZ(200px); } #react:hover .out_back { transform: translateZ(-200px); } #react:hover .out_left { transform: rotateY(90deg) translateZ(200px); } #react:hover .out_right { transform: rotateY(-90deg) translateZ(200px); } #react:hover .out_top { transform: rotateX(90deg) translateZ(200px); } #react:hover .out_bottom { transform: rotateX(-90deg) translateZ(200px); } /*里面的圖片散開*/ #react:hover .in_front { transform: translateZ(100px); } #react:hover .in_back { transform: translateZ(-100px); } #react:hover .in_left { transform: rotateY(90deg) translateZ(100px); } #react:hover .in_right { transform: rotateY(-90deg) translateZ(100px); } #react:hover .in_top { transform: rotateX(90deg) translateZ(100px); } #react:hover .in_bottom { transform: rotateX(-90deg) translateZ(100px); }