本文共 3436 字，大约阅读时间需要 11 分钟。

灵活运用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轴向前平移一半的高度

三、实践

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

.box {            transform-style: preserve-3d;         }

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

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

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

转载地址：https://blog.csdn.net/zx2014567296/article/details/116244363 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！