CSS transforms

transforms

定义：可以在不影响正常文档流的情况下改变作用内容的位置 可以进行的变形包括旋转，倾斜，缩放以及位移，同时适用于平面以及三维空间。

属性：只要包含下面两个

• transform
• transform-origin

transform: 定义了一系列变化方法

rotate:设置一个角度使元素按照相对原点在二维空间进行转换， 当值为正值得时候顺时针旋转，当值为负值的时候按照逆时针旋转 skew:按照元素中心位置围绕X轴Y轴进行一定的角度倾斜，导致形状改变，但是不会旋转，主要有三种使用方式

1. skew(x, y) 使元素在水平和垂直方向同时扭曲变形
2. skewX(x) 使元素仅在水平方向扭曲变形
3. skewY(Y) 使元素仅在垂直方向扭曲变形

scale: 使元素按照中心原点进行缩放

1. scale(x, y) 使元素在水平和垂直方向同时缩放
2. scale(x) 使元素仅在水平方向缩放
3. scale(Y) 使元素仅在垂直方向缩放

translate:将元素按照指定方向移动

1. translate(x, y) 使元素在水平和垂直方向同时移动
2. translate(x) 使元素仅在水平方向移动
3. translate(Y) 使元素仅在垂直方向移动

matrix matrix 是一个包含6个值的2d变换矩阵，相当于直接应用一个[a b c d e] 的变换矩阵

transform-origin： 设置元素变形的原点

语法：

• 一个值： 必须是< length>，< percentage>，或 left, center, right, top, bottom关键字中的一个。
• 两个值： 其中一个必须是< length>，< percentage>，或left, center, right关键字中的一个。 另一个必须是< length>，< percentage>，或top, center, bottom关键字中的一个。
• 三个值： 前两个值和只有两个值时的用法相同。 第三个值必须是< length>。它始终代表Z轴偏移量。

其中kekword主要有以下几个：

转载于:https://juejin.im/post/5c024c7751882526a64401e1