本文介绍了如何利用CSS3的3D转换技术制作两盒翻转和旋转木马效果。通过设置transform、perspective和transform-style属性，实现了3D空间中的动态变换。在两盒翻转案例中，详细讲解了翻转过程及关键代码；旋转木马案例则展示了元素沿着不同轴线的翻转效果。强调在设置CSS3 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
※两盒翻转案例
一、效果展示
一个正反两面的圆
当鼠标经过时会翻转至反面
二、思路
- 设置两个叠加的盒子，一个作为正面，一个作为反面（div是块级元素，要想叠加，需要用到定位）
- 让反面的盒子翻转180°，使得鼠标经过翻转时可以正对着我们
- 设置：hover伪类选择器
- 为
最低0.47元/天 解锁文章
扫一扫
661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
