HTML——3D移动、3D透视、3D效果、3D呈现案例效果
发布日期:2021-06-29 11:16:32
浏览次数:3
分类:技术文章
本文共 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
※两盒翻转案例
一、效果展示
一个正反两面的圆 当鼠标经过时会翻转至反面二、思路
- 设置两个叠加的盒子,一个作为正面,一个作为反面(div是块级元素,要想叠加,需要用到定位)
- 让反面的盒子翻转180°,使得鼠标经过翻转时可以正对着我们
- 设置:hover伪类选择器
- 为了有透视的效果,看3d更立体,需要设置perspective(perspective需要设置在被观察者的父类)
三、实践
- 设置一个大盒子.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后
- 为父盒子.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.设置父盒子和两个子盒子Show me your articI 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; }
- 想要看起来是一个盒子翻转,我们需要将.on沿Z轴向前平移(这里不选择.under沿Z轴向后平移的原因是翻转是根据中心点进行翻转,而中心点在X轴上,因此让.on向前移动,保证中心点在两盒之间)
.on { transform: translateZ(25px); }四、注意事项
- 如果有位移和其他多个样式,要优先写位移!!!!如果先写其他样式再位移,会改变中心点,导致位移效果变形
- .under角度一定是要负数!!!要让字体呈正面向下展示,要-90deg翻转
转载地址:https://blog.csdn.net/zx2014567296/article/details/116244363 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2024年04月13日 23时41分11秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
我在哥大读博的五年,万字总结
2019-04-29
本科、硕士、博士,究竟有何区别?
2019-04-29
如果我的实验室也这样布置,那多好。
2019-04-29
现在做硬件工程师还有前途吗?
2019-04-29
用 50 种编程语言写“Hello,World!”
2019-04-29
GD32替换STM32,这些细节一定要知道。
2019-04-29
华为员工离职心声:菊厂15年退休,感恩,让我实现了财务自由!
2019-04-29
春晚上的“拓荒牛”
2019-04-29
嵌入式驱动自学者的亲身感受,有什么建议?
2019-04-29
华为被超越!这家公司成中国最大智能手机制造商,不是小米!
2019-04-29
腾讯机器狗,站起来了!
2019-04-29
我用自己创造的深度学习框架进入腾讯,爽!
2019-04-29
芯片为什么持续缺货?
2019-04-29
又涨了?2021 年 3 月程序员工资统计新出炉
2019-04-29
初入行的C++程序员,如何快速摆脱CRUD阶段?
2019-04-29
研究生跟了一个很棒的导师是种怎样的体验?
2019-04-29
学会扶墙的机器人:没有什么能让我倒下!
2019-04-29
美国无人机在火星首飞成功,创造历史,3米飞行高度悬停30秒
2019-04-29
单片机的几种数字滤波算法
2019-04-29
用单片机控制导弹?
2019-04-29