CSS3-3D 转换

10次阅读
没有评论

共计 841 个字符,预计需要花费 3 分钟才能阅读完成。

三维坐标系

三维坐标系其实就是指立体空间,立体空间是由 3 个轴共同组成的

  • x 轴:水平向右 注意:x右边是正值,左边是负值
  • y 轴:垂直向下 注意:y下边是正值,上边是负值
  • z 轴:垂直屏幕 注意:z往外面是正值,往里面是负值(近正远负)
    CSS3-3D 转换

3D位移:translate3d(x, y, z)

  • translform: translateX(100px),仅在X轴移动
  • translform: translateY(100px),仅在Y轴移动
  • translform: translateZ(100px),仅在Z轴移动
  • translform: translate3d(x, y, z),其 x,y,z 分别指要移动的轴的方向距离

3D旋转:rotate3d(x, y, z)

  • translform: rotateX(45deg),沿着 X 轴正方向旋转 45 度
  • translform: rotateY(45deg),沿着 Y 轴正方向旋转 45deg
  • translform: rotateZ(45deg),沿着 Z 轴正方向旋转 45deg
  • translform: rotate3d(x, y, deg),沿着自定义轴旋转 deg 为角度

左手准则之 x 轴,手指弯曲平放

左手的大拇指指向 x 轴正方向,其余手指的弯曲方向就是该元素沿着 x 轴旋转的正方向

左手准则之 y 轴,手指弯曲垂直放

左手的大拇指指向 y 轴正方向,其余手指的弯曲方向就是该元素沿着 y 轴旋转的正方向

透视:perspective

  • 透视我们也称为*视距:视距就是人的眼睛到屏幕的距离
  • 距离视觉点越近的在电脑平面成像越大,越远越小
  • 透视的单位是像素
  • 透视写在被观察元素的父盒子上面
CSS3-3D 转换

d:就是视距,视距就是一个距离人的眼睛到屏幕的距离

z:就是 z 轴,物体距离屏幕的距离,z 轴越大(正值)我们看到的物体就越大

3D呈现:transform-style

  • 控制子元素是否开启三维立体环境
  • transform-style: flat; 子元素不开启3D立体空间(默认的)
  • transform-style: preserve-3d; 子元素开启立体空间
  • 代码写给父级,但是影响的是子盒子
正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-20发表,共计841字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码