CSS3 3D移动(translate3d)、透视(perspective)、3D旋转(rotate3d)、3D呈现(transform-style)

CSS3 3D移动(translate3d)、透视(perspective)、3D旋转(rotate3d)、3D呈现(transform-style)3D移动translate3dtransform: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轴上都

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效果,就需要使用透视
  • 透视的单位是像素
  • 透视也称为视距,表示人的眼睛到屏幕的距离。对同一个位置的物体,视距越大,成像越小
  • 透视要写在被观察元素的父盒子上面(可以是祖先元素)
  • 下图就是一个透视的说明图,其中
  1. d:就是视距,即人的眼睛到屏幕的距离
  2. z:就是z轴,即物体到屏幕的距离,z轴越大(正值),成像也就越大;负值则相反
CSS3 3D移动(translate3d)、透视(perspective)、3D旋转(rotate3d)、3D呈现(transform-style)

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

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注