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更立体，需要设置perspective（perspective需要设置在被观察者的父类）

三、实践

1. 设置一个大盒子.box，设置宽高；里面装两个盒子.front和.back，为其赋予父盒子宽高和背景颜色。利用定位使他们两个重合。

        
正面
        
反面
    

.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后

2. 为父盒子.box设置:hover伪类选择器，使其能够翻转

.box {
           transition: all .5s;
        }
.box:hover {
            transform: rotateY(180deg);
        }

效果

盒子能够翻转，但不能显示反面

3. 让背面盒子向后翻转180°

.back {
            background-color: springgreen;
            transform: rotateY(180deg);
            /* 翻转180°，让.box盒子翻转时正面朝上  */
        }

但是要想实现翻转后看到反面，还需要在父类盒子设置3D呈现——transform-style: preserve-3d;

.box {
             transform-style: preserve-3d; 
            /* 让背面的紫色盒子保留点立体空间 */
        }

这样就能显示出效果了

4. 最后在body设置perspective，指定了观察者与的距离，使具有三维位置变换的元素产生透视效果

body {
            /* perspective写在被观察者的父盒子上，相当于眼睛到被观察物体之间的视距  */
            perspective: 500px;
        }

※旋转木马案例

一、效果展示
一开始的效果

当鼠标放在上面后向下翻转展示

二、思路

1. 设置一个父盒子.box，父盒子设置宽高，里面设置两个子盒子.on和.under，继承父盒子宽高（用100%设置），设置绝对定位
2. .under盒子向下平移一半的高度，再沿X轴翻转90°
3. .on盒子沿Z轴向前平移一半的高度

三、实践
1.设置父盒子和两个子盒子

        
Show me your artic
        
I want you!
    

.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; 
        }

3. 想要看起来是一个盒子翻转，我们需要将.on沿Z轴向前平移（这里不选择.under沿Z轴向后平移的原因是翻转是根据中心点进行翻转，而中心点在X轴上，因此让.on向前移动，保证中心点在两盒之间）

.on {
            transform: translateZ(25px);
        }

四、注意事项

1. 如果有位移和其他多个样式，要优先写位移！！！！如果先写其他样式再位移，会改变中心点，导致位移效果变形
2. .under角度一定是要负数！！！要让字体呈正面向下展示，要-90deg翻转