文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
上节课我们已经学习了3d相关的知识了 ， 今天我们就通过学习的3d知识 ， 做两个案例 。
1.HTML 3d盒子翻转案例我们要实现的效果是 ， 当鼠标经过下面的盒子时 ， 盒子进行翻转到另一面 。
2.3d盒子翻转案例解题思路：1）首先我们用一个大盒子装两个小盒子 ， 这两个小盒子用来显示效果 。
2）我们将大盒子的宽度和高度以及外边距设置好：
3）我们将两个小盒子设置宽度和高度与大盒子一致 ， 由于我们最终想要实现的效果是两个圆形 ， 因此需要设置边框的角度和文字水平、垂直居中对齐：
【AMD|HTML 3d盒子翻转案例】
4）由于这两个盒子时叠放在一起的 ， 因此我们利用定位 ， 这样两个盒子就叠放到了一起：
5）将两个小盒子分别设置不同的背景颜色 ， 并为了调整两个盒子的显示顺序 ， 我们通过z-index来设置：
z-index 属性设置元素的堆叠顺序 。 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 。
6）我们希望得到的效果是 ， 当鼠标经过盒子时 ， 前面盒子旋转到后面盒子位置 ， 后面盒子旋转到前面盒子位置 ， 因此需要将两个盒子背对背显示 ， 这样在进行旋转的时候后面盒子的文字才能正常显示 ， 因此需要将后面的盒子沿着y轴旋转180度：
7）设置大盒子鼠标经过图像沿着y轴旋转180度 ， 这样才能实现两个盒子旋转的效果：
8)由于大盒子设置了旋转的效果 ， 会将小盒子的旋转效果覆盖因此需要将大盒子设置3d呈现效果：
9）为了更加明显的注意到旋转的效果 ， 因此将大盒子设置过渡：
10）可能在设置完成后需要闪屏的效果 ， 因此需要将两个小盒子设置backface-visibility属性定义当元素不面向屏幕时是否可见 。
相关经验推荐
- 显卡|AMDR3-2200G核显性能怎么样相当于什么级别的独立显卡？
- OPPO|发售一个月多 AMD RX 6500 XT显卡终于可以原价买了
- 电视盒子|受人喜爱广告还少的网络机顶盒，价格便宜适合所有人
- 赛灵思|苏妈神来之笔！3300多亿收购赛灵思 AMD手中现金越来越多
- 机器人|十年，AMD“三剑合一”再出击
- 教会|HTML3D转换怎么使用？一分钟教会你！
- 微软|AMD锐龙7000处理器将搭载核显：够亮个机
- 英特尔|市值1977亿美元！“千年老二”AMD终于反超英特尔！背后原因有3个？
- 小米科技|拼多多几十块的电视盒子能买吗，为什么这么便宜？
- AMD|性能暴涨40% AMD的3D缓存版Zen3锐龙坚持8核：游戏够用