CSS3新增属性(4)

CSS3 3D转换

一、三维坐标系

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

  • X轴:水平向右 X右边为正值,左边为负值
  • Y轴:水平向下 Y下面为正值,上面为负值
  • Z轴:垂直屏幕 往外面是正值,往里面是负值

 

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

  • transform:translateX(100px) :仅仅在x轴上移动
  • transform:translateY(100px) :仅仅在y轴上移动
  • transform:translateZ(100px) :仅仅在z轴上移动 (translateZ 一般用px单位)
  • transform:translate3d(x,y,z):其中x,y,z 分别指要移动的方向的距离 (x,y,z没有值时使用0代替,不能不写)

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

  • 3D旋转可以让元素在三维平面内沿着X轴,Y轴,Z轴或者自定义轴进行旋转

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

  • rotateX:
    • 判断元素旋转的方向,左手准则(左手手背面向眼睛,手伸直,大拇指伸直,弯曲四个拇指)
    • 左手的大拇指指向的X轴的正方向
    • 其余手指的弯曲 方向就是该元素沿着X旋转的方向

  • rotateY:
    • 左手的大拇指指向Y轴(向下)方向,其余手指弯曲方向就是该元素沿着Y轴旋转的方向(正值)

  • rotatZ:
    • 左手的大拇指指向Y轴(指向自己)方向,其余手指弯曲方向就是该元素沿着Z轴旋转的方向(正值)

  • rotate3d(x,y,z,45deg)
    • 沿着自定义轴旋转deg角度,X、Y、Z表示旋转轴的矢量

四、透视:perspective

  • 在2D平面产生近大远小视觉立体,但是只是效果二维的
  • 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面)
  • 模拟人类的视觉位置,可认为安排一只眼睛去看
  • 透视我们也成为视距:视距就是人的眼睛到屏幕的距离
  • 距离视觉点越近的在电脑平面成像越大,越远成像越小
  • 透视的单位是像素
  • 透视写在被观察元素的父盒子上面

五、3D呈现transform-style

  • 控制子元素是否开启三维立体环境
  • transform-style:flat 子元素不开启3d立体空间 默认值
  • transform-style:preserve-3d; 子元素开启立体空间
  • 代码写给父级,但是影响的是子盒子

 

博客只用于记录自己学习的东西,如有错误感谢留言斧正哦!

 

posted @ 2019-12-09 21:34  哈喽小伙  阅读(155)  评论(2编辑  收藏  举报