18-CSS3的2D和3D属性

一、2D属性

2D变换，是在一个平面的空间对元素进行的操作。可以对元素进行水平或者垂直位移、旋转或者拉伸

变形属性：transform

• transform: none 默认值
• transform: translate 移动、平移（单位是px）
• transform: scale 缩放（没有单位，默认是1，倍数）
• transform: rotate 旋转（单位是deg 度数）
• transform: skew 倾斜（单位是deg 度数）
• transform: perspective 景深、视距（单位是px）

1. 位移属性：transform: translate(参数)

   • transform: translateX(200px) X轴，方向可大写也可小写
   • transform: translateY(200px) Y轴
   • transform: translate(x,y) 控制元素沿着两个方向进行移动，只设置一个参数的时候只有X轴会有作用

2. 缩放属性：transform:scale(参数)

   • scale(x,y) 沿着两个方式缩放多少倍，宽高缩放，当两个方向一样的时候可以简写成一个
   • scaleX() 宽度
   • scaleY() 高度
   • 关于参数的取值范围：
     • 小于0 颠倒
     • 等于0 隐藏
     • 小于1 缩小
     • 等于1 保持不变
     • 大于1 变大

3. 设置变形的基点：transform-origin

   • 属性值：top/right/bottom/left/center（默认值）
     • 2D：X、Y
     • 3D：X、Y、Z

4. 旋转属性：transform:rotate(参数)

   transform:rotate(60edg) 60度

   • rotate(一个参数) 默认的是z轴，默认正值沿着顺时针，负值沿着逆时针
   • rotateX() 绕着X轴旋转，正值沿着顺时针，负值沿着逆时针
   • rotateY() 绕着Y轴旋转，正值沿着顺时针，负值沿着逆时针

   注意：2D的观察方向永远都是站在轴向的正值方向去看的

   为了很好的观察旋转属性的方向,可以使用3D中的景深属性:远小近大(视距)
   有两种设置方法
   **1.可以在父级元素上添加 perspective:1200px**
   **2.可以在子级元素上添加 transform:perspective(1200px)**
   **3.建议把景深效果设置在父级元素上**
   

5. 倾斜属性：transform:skew(参数)

   transform:skew(30edg)

   • skew(x,y)
   • skewX()
   • skewY()

二、3D属性

浏览器默认是2D空间，需要设置属性才可以变成3D空间（只是多了一条Z轴）

属性：transform-style

属性值：flat （2D） 、preserve （3D）

​ 3D中常见Z轴的设置：

1. 位移属性
   - 2D: translate(x,y)  translateX()  translateY()
   - 3D: translateZ()  translate3d(x,y,z)
2. 缩放属性
   - 2D: scale(x,y)  scaleX() scaleY()
   - 3D: scaleZ()单独使用的时候没有效果，需要使用scale3d(x,y,z)
3. 旋转属性
   - 2D: rotate(默认一个变量是Z轴) rotateX() rotateY()
   - 3D: rotateZ() rotate3d(x矢量值, y矢量值, z矢量值, 角度值) 0/1 关闭/打开
4. 倾斜没有Z轴的属性

多个变形属性一起使用的时候先设置位移再设置其他变形属性

案例：正方体绘制

在正方体绘制的案例中，可以设置旋转背面是否可见属性，决定元素旋转背面是否可见

语法：backface-visibility: visible（反面可见，默认值） | hidden（反面隐藏）