灵活运用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翻转
如果觉得《HTML——3D移动 3D透视 3D效果 3D呈现案例效果》对你有帮助,请点赞、收藏,并留下你的观点哦!