css变换属性

了解单词

• transform:变换，转换，变形
• origin：（窝瑞陈）允许你改变被转换元素的位置。
• perspective：（破四潘科体悟）：规定 3D 元素的透视效果。
• translate：（穿四累特）移动（本意是翻译）
• scale：（死给哦）缩放
• rotate：（肉tei的）旋转
• skew：（四给吴）倾斜，斜切

变换属性

|--|--|--|--|
| 属性 | 描述 |
| transform | 向元素应用 3D 转换。 |
| transform-origin | 允许你改变被转换元素的位置。 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 |
| perspective | 规定 3D 元素的透视效果。 |
| perspective-origin | 规定 3D 元素的底部位置。 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 |

1.透视

透视指在平面上描述物体的空间关系的方法。
透视的特点：
1.近大远小
2.近快远慢
3.近实远虚

2.transform

定义：定义元素的变换：移动、旋转、缩放和倾斜四种。

---

移动

属性值：

• translate() ： translateX()和translateY()的简写属性值，第一个值沿X轴（水平轴）发生位置移动，第二个值沿Y轴（垂直轴）发生位置移动。
• translateX()：元素沿X轴（水平轴）发生位置移动
• translateY()：元素沿Y轴（垂直轴）发生位置移动
• translateZ()：元素沿Z轴（垂直于屏幕的轴）发生位置移动，translateZ() CSS函数沿着z轴在三维空间中重新定位元素,即,从观察者的角度而言更近或者更远。这个变换是由一个<length>元素定义的,它指定元素向内或向外移动的距离。

   div{
        tramsform： translate() |  translateX() |  translateY()
        }
  

注：接受负值。

---

旋转

单位：deg

• rotate()： 简写属性，方法根据给指定的角度顺时针或逆时针旋转元素。
• rotateX()：元素沿X轴（水平轴）发生旋转
• rotateY()：元素沿Y轴（垂直轴）发生旋转
• rotateZ()：元素沿Z轴（垂直于屏幕的轴）发生旋转

---

缩放

单位：deg

• scale()： 简写属性，进行水平垂直双向缩放。
• scaleX()：元素沿X轴（水平轴）进行缩放
• scaleY()：元素沿Y轴（垂直轴）进行缩放
• rotateZ()：缩放Z轴

---

斜切

单位：deg

• skew()： 简写属性，进行水平垂直双向斜切。
• skewX()：元素沿X轴（水平轴）进行斜切
• skewY()：元素沿Y轴（垂直轴）进行斜切

---

复合属性matrix()

定义：matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
示例：

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

---

3.perspective

定义：定义Z轴原点到屏幕的距离。Z轴是垂直于屏幕的轴。（定义在父元素身上。）
语法：

.container{
            perspective: none;/*不开启3D视角*/
            perspective: 500px;/*坐标原点距离屏幕的距离*/
}

属性值：
none:不开启透视 （默认）
number ：开启透视，坐标原点距离屏幕的距离，以像素为单位。最小值是1px，不可以取负值。

注：大透视，小变换，小透视，大变换。换而言之（number值越大，translateZ()函数的变换效果越不明显。）

---

4.perspective-origin

定义：透视源：设置透视视角位置。
语法：

.container{
 perspective-origin: left | bottom | top | right | center;
}

属性值：
注：可以设置左上，右上，左下，右下，中上，中下等组合视角。