likes
comments
collection
share

3d效果

作者站长头像
站长
· 阅读数 31

3d嘛,就是比2d多一d,简单点讲,就是多了一个z轴。至于3d的平移旋转和缩放,和2d里的属性以及属性值完全一样。不过需要注意的是想要3d效果,这三个属性不能少第一:加景深perspective: 1200px;注意啊,这个不是加在需要展示的3d元素上,是要加在该元素的父元素上面,一般取值800-1200px,也可以取更多,但是不推荐嗷。第二:transform-style:preserve-3d;这句呢代表在3d空间中展示,如果没加这一句呢,是没有效果的第三:加一个点来观察perspective-origin: 50% 50%;当然啊,这个50%是常规取值,也可以取别的值。现在讲一下注意点了众所周知啊,3d的平移之类的属性和2d里的完全一样那么下面的知识点要记住:1.transform: translateX(像素值); 水平方向移动,正值向右,负值向左 transform: translateY(像素值); 垂直方向移动,正值向下,负值向上 transform: translateZ(像素值); z轴方向移动,正值距离眼睛更近,负值距离眼睛更远 transform: translate3d(水平方向像素值, 垂直方向像素值, z轴方向像素值); 简写 我更偏向与这个简写但是想要用简写要熟记正负值的移动方向哦。

转载自:https://segmentfault.com/a/1190000041484960
评论
请登录