HTML——3D移动、3D透视、3D效果、3D呈现案例效果

灵活运用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

※两盒翻转案例

一、效果展示

一个正反两面的圆

当鼠标经过时会翻转至反面

二、思路

1. 设置两个叠加的盒子，一个作为正面，一个作为反面（div是块级元素，要想叠加，需要用到定位）
2. 让反面的盒子翻转180°，使得鼠标经过翻转时可以正对着我们
3. 设置：hover伪类选择器
4. 为了有透视的效果，看3d更立体ÿ