3D移动translate3d
- transform: translateX(100px):仅仅是在X轴上移动
- transform: translateY(100px):仅仅是在Y轴上移动
- transform: translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般都是用px单位)
- transform: translateX(100px) translateY(100px):沿着X轴和Y轴同时移动
- transform: translate3d(x,y,z):在x,y,z轴上都移动
透视perspective
透视perspective的语法格式如下:
方法1:perspective: 800px;
方法2:transform: prespective(800px);
注意:
1、方法1定义的perspective只在初次渲染时,投影在屏幕上;
2、方法2定义的perspective会根据transform动画的变化来进行重新的渲染;
3、当使用js或Css3进行动画时,尽量选择方法2
- 如果想要在网页上产生3D效果,就需要使用透视
- 透视的单位是像素
- 透视也称为视距,表示人的眼睛到屏幕的距离。对同一个位置的物体,视距越大,成像越小
- 透视要写在被观察元素的父盒子上面(可以是祖先元素)
- 下图就是一个透视的说明图,其中
- d:就是视距,即人的眼睛到屏幕的距离
- z:就是z轴,即物体到屏幕的距离,z轴越大(正值),成像也就越大;负值则相反
3D旋转rotate3d
-
transform: rotateX(45deg):沿着x轴正方向旋转45度
其中,旋转角度为正时,图片上边框向里旋转;旋转角度为负时,图片上边框向外旋转。(可以借助左手准则来记忆,手指的弯曲方向就是旋转角度为正时的旋转方向)
-
transform: rotateY(45deg):沿着y轴正方向旋转45deg
其中,旋转角度为正时,图片上边框向里旋转;旋转角度为负时,图片上边框向外旋转。(可以借助左手准则来记忆,手指的弯曲方向就是旋转角度为正时的旋转方向)
-
transform: rotateZ(45deg):沿着z轴正方向旋转45deg,跟2D旋转几乎一样,都是在平面内旋转
-
transform: rotate3d(x,y,z,deg):沿着自定义轴旋转deg
其中,xyz表示旋转轴的矢量;deg表示旋转的角度。举例说明如下:
transform: rotate3d(1,0,0,45deg) ——表示沿着x轴旋转45度
transform: rotate3d(1,1,0,45deg) ——表示沿着对角线旋转45度
3D呈现transform-style
- transform-style属性是控制子元素是否开启三维立体环境
- transform-style: flat 子元素不开启3d立体空间,默认值
- transform-style: preserve-3d 子元素开启3d立体空间
- 该属性是写给父级元素的,但影响的是子元素
微信公众号也会定期更新,觉得文章写得还可以的,可以加个关注!点个赞!谢谢!
今天的文章CSS3 3D移动(translate3d)、透视(perspective)、3D旋转(rotate3d)、3D呈现(transform-style)分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/32078.html