阅读 59
CSS 3D透视效果

CSS 3D透视效果

场景

设计图纸需求:当鼠标移到对应图标上时,触发动画,图标3D旋转。

没太接触过这种效果,凭借着印象使用rotateX()和rotateY()rotateZ()方法,并上网搜索,不太熟悉 慢慢摸索。

1.试图用 transform: rotateY(0deg); transform: rotateX(0deg); transform: rotateZ(0deg);来模拟出3D效果,导致后面的 transform: rotate会覆盖前面的transform,想要叠加使用这三种效果需要将他们写在一起 transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);

2.使用rotateZ()只是简单地平面,并不能实现近大远小

3.想要实现真正的近大远小,需要在容器中添加属性perspective属性

image.png

添加了属性的效果

image.png

没有添加属性的效果,只是看起来扁了

image.png

关于3D透视查阅过程中比较好理解的一个例子文章

文章分类
前端
文章标签