成品展示
接下来开始制作旋转老婆图片
一、准备html骨架和基本的css
先准备好html骨架(后面为了挨个测试可以先把后面5个div注释掉)
<div class="bigbox"><div><img src="img/w1.jpg" alt=""></div><div><img src="img/w1.jpg" alt=""></div><div><img src="img/w1.jpg" alt=""></div><div><img src="img/w1.jpg" alt=""></div><div><img src="img/w1.jpg" alt=""></div><div><img src="img/w1.jpg" alt=""></div></div>
预定义好css样式
/* 初始化所有的盒子间距为0,比较常用 */* {padding: 0;margin: 0;}/* 设置大盒子的大小 */.bigbox {/*相对位置属性*/position: relative;width: 300px;height: 200px;margin: 100px auto;}/* 设置所有小盒子的大小及绝对定位（公用的属性） */.bigbox>div {/*绝对位置属性*/position: absolute;top: 0;width: 100%;height: 100%;}/* 设置图片的大小 */img {width: 100%;height: 100%;}
效果图（所有的div叠加在了一起）：
二、开始修饰动画旋转效果
为body设置深景（相当于一个镜头，距离屏幕的距离）
body {/* 设置景深 */perspective: 500px;}
为大盒子和设置旋转旋转中心+子元素3d属性：
transform-origin: 150px 0 -300px;transform-style: preserve-3d;
为大盒子添加过渡样式，使盒子变换位置时变得顺滑+易于观察。
transition: all 5s;
设置鼠标经过样式，用于测试：
.bigbox:hover {transform: rotateY(360deg); }
为了测试方便，这里再加一个盒子便于观察：
/*选择器选出的第二个盒子*/.bigbox>div:nth-child(2) {/*因为有旋转轴的存在，子盒子只需要调整角度就可以换位置啦~*/transform: rotateY(180deg);}
进行第一次测试：旋转正面向屏幕的盒子
可以看到，效果非常滴成功~（好耶~）
把剩下的所有盒子加上试试：
.bigbox>div:nth-child(3) {transform: rotateY(120deg);}.bigbox>div:nth-child(4) {transform: rotateY(300deg);}.bigbox>div:nth-child(5) {transform: rotateY(60deg);}.bigbox>div:nth-child(6) {transform: rotateY(240deg);}
这个时候，就该改下鼠标经过属性啦~
.bigbox:hover {/* transform: rotateY(360deg); *//* 设置经过即停模式 */animation-play-state: paused;}
在给大盒子加上动画属性：
animation: word 5s infinite linear;
接下来，咱写个动画让它自己转：(注意！上面的“word”对应下面的动画名！)
/* 设置动画 */@keyframes word {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}
看下最终效果吧~
最后，再把（老婆）图片放上去，就大功告成啦~
三、最终代码展示
下面是完整代码，整个文件要以".html"文件结尾再打开哦~！
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旋转编制</title></head><body><style>/* 初始化所有的盒子间距为0,比较常用 */* {padding: 0;margin: 0;}body {/* 设置景深 */perspective: 500px;}/* 设置大盒子的大小 */.bigbox {width: 300px;height: 200px;margin: 100px auto;/* 设置相对定位 */position: relative;/* 设置旋转中心 */transform-origin: 150px 0 -300px;/* 设置过渡样式 */transition: all 5s;/* 设置子元素具备3d属性 */transform-style: preserve-3d;/* 添加动画 */animation: word 5s infinite linear;}/* 设置动画 */@keyframes word {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}/* 设置鼠标经过样式 */.bigbox:hover {/* transform: rotateY(360deg); *//* 设置经过即停模式 */animation-play-state: paused;}/* 设置小盒子的大小及绝对定位 */.bigbox>div {position: absolute;top: 0;width: 100%;height: 100%;/* 设置旋转中心 */transform-origin: 150px 0 -300px;}/* 设置剩下图片的位置 */.bigbox>div:nth-child(2) {transform: rotateY(180deg);}.bigbox>div:nth-child(3) {transform: rotateY(120deg);}.bigbox>div:nth-child(4) {transform: rotateY(300deg);}.bigbox>div:nth-child(5) {transform: rotateY(60deg);}.bigbox>div:nth-child(6) {transform: rotateY(240deg);}/* 设置图片的大小 */img {width: 100%;height: 100%;}</style><div class="bigbox"><!--img/w1.jpg是图片位置哦！--><div><img src="img/w1.jpg" alt=""></div><div><img src="img/w2.jpg" alt=""></div><div><img src="img/w4.jpg" alt=""></div><div><img src="img/w5.jpg" alt=""></div><div><img src="img/w6.jpg" alt=""></div><div><img src="img/w7.jpg" alt=""></div></div></body></html>
（测位标靶是静止不动的，便于参照观察，不是网页的属性哦~）
