灵活运用3D效果制作两盒翻转与旋转木马案例
※概念
3D转换： ①移动：transform：translate3d（x，y，z）；
注意：xyz不能省略，不需要需要写0 ②透视——近大远小：perspective：（）；
注意：透视是写在被观察者的父盒子上 ③旋转：transform：rotateX（x deg）； 左手准则：左手拇指指向右方向，其余手指弯曲的方向就是x轴旋转的正方形
transform：rotateY（y deg）； 左手准则：左手拇指指向下方向，其余手指弯曲的方向就是y轴旋转的正方形
transform：rotateZ（z deg）； 左手准则：左手拇指指向自己，其余手指弯曲的方向就是y轴旋转的正方形
④3D呈现：transfrom-style（默认不开启）——代码写在父盒子上 transfrom-style：preserve-3d
※两盒翻转案例
一、效果展示
一个正反两面的圆
当鼠标经过时会翻转至反面
二、思路
设置两个叠加的盒子，一个作为正面，一个作为反面（div是块级元素，要想叠加，需要用到定位）让反面的盒子翻转180°，使得鼠标经过翻转时可以正对着我们设置：hover伪类选择器为了有透视的效果，看3d更立体，需要设置perspective（perspective需要设置在被观察者的父类）
三、实践
设置一个大盒子.box，设置宽高；里面装两个盒子.front和.back，为其赋予父盒子宽高和背景颜色。利用定位使他们两个重合。
<div class="box"><div class="front">正面</div><div class="back">反面</div></div>
.box {position: relative;width: 200px;height: 200px;margin: 100px auto;}.front,.back {position: absolute;width: 100%;height: 100%;border-radius: 50%;text-align: center;line-height: 200px;font-size: 30px;color: white;letter-spacing: 5px;}.front {background-color: skyblue;z-index: 1; }.back {background-color: springgreen;}
效果——设置z-index前
*由于.front与.back的权重一致，就近原则优先显示.back的画面。想要默认.front在上面，需要为.front设置z-index*
效果——设置z-index后
为父盒子.box设置:hover伪类选择器，使其能够翻转
.box {transition: all .5s;}.box:hover {transform: rotateY(180deg);}
效果
盒子能够翻转，但不能显示反面
让背面盒子向后翻转180°
.back {background-color: springgreen;transform: rotateY(180deg);/* 翻转180°，让.box盒子翻转时正面朝上 */}
但是要想实现翻转后看到反面，还需要在父类盒子设置3D呈现——transform-style: preserve-3d;
.box {transform-style: preserve-3d; /* 让背面的紫色盒子保留点立体空间 */}
这样就能显示出效果了
最后在body设置perspective，指定了观察者与的距离，使具有三维位置变换的元素产生透视效果
body {/* perspective写在被观察者的父盒子上，相当于眼睛到被观察物体之间的视距 */perspective: 500px;}
※旋转木马案例
一、效果展示
一开始的效果
当鼠标放在上面后向下翻转展示
二、思路
设置一个父盒子.box，父盒子设置宽高，里面设置两个子盒子.on和.under，继承父盒子宽高（用100%设置），设置绝对定位.under盒子向下平移一半的高度，再沿X轴翻转90°.on盒子沿Z轴向前平移一半的高度
三、实践
1.设置父盒子和两个子盒子
<div class="box"><div class="on">Show me your artic</div><div class="under">I want you!</div></div>
.box {margin: 0 50px;position: relative;width: 260px;height: 50px;margin: 0 auto;}.on,.under {position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;line-height: 50px;font-size: 25px;color: white;}
.on {background-color: #857b7b;z-index: 1;}.under {background-color: yellowgreen;}
2.移动.under盒子直到在.on下方与.on垂直，为.box设置:hover伪类
.under {/* 如果有位移和其他多个样式，要优先写位移！！！！ */transform: translateY(25px) rotateX(-90deg);/* 这里的角度一定是要负数！！！ */}
.box:hover {transform: rotateX(90deg);}
设置好后发现.under盒子不见了，还是因为没设置3D呈现transform-style: preserve-3d;，在父盒子.box设置transform-style: preserve-3d;就能看到效果了
.box {transform-style: preserve-3d; }
想要看起来是一个盒子翻转，我们需要将.on沿Z轴向前平移（这里不选择.under沿Z轴向后平移的原因是翻转是根据中心点进行翻转，而中心点在X轴上，因此让.on向前移动，保证中心点在两盒之间）
.on {transform: translateZ(25px);}
四、注意事项
如果有位移和其他多个样式，要优先写位移！！！！如果先写其他样式再位移，会改变中心点，导致位移效果变形.under角度一定是要负数！！！要让字体呈正面向下展示，要-90deg翻转
