理解CSS transform 2d变换

演示效果

transform-origin

transform-origin表示变形操作的原点，默认位于元素的中心，初始值50% 50%，可定义三个值，分别表示x轴、y轴和z轴，2d变换的原点由x轴和y轴确定（z轴为0）。

属性值：

x轴：left | center | right | <length> | <percentage>
y轴：top | center | bottom | <length> | <percentage>

当属性值为关键字时，所代表的位置如下图所示

当属性为数值时，x轴的数值表示在x轴上距离0点的偏移量，y轴数值表示在y轴上距离0点的偏移量，0点即元素边框外侧左上角的位置。

当属性值为百分比时，x轴的百分比表示相对于元素宽度，y轴是相对于元素高度，这里的宽高包括padding和border，即百分比是相对于整个包含块。

单值：

当只有一个值时，第二个值默认为center

translate函数

translate位移函数使元素从原来的位置移动到指定位置，2d位移相关函数有translate()、translateX()和translateY()三个。当元素发生位移后，元素的x轴和y轴也一起移动，所以如果再进行其他变形操作，则按照改变后的x轴y轴位置变形。

语法：translate(x [,y]?)

x表示元素在x轴上的位移，y表示元素在y轴方向上的位移，当y值不存在时相当于y=0。translateX(x)相当于translate(x, 0)，translateY(y)相当于translate(0,y)。

属性值可以是百分比，x%是相对于元素的宽度，y%是相对于元素的高度，这里的宽高包括元素的padding和border。

例1演示效果

scale函数

scale缩放函数让元素根据变形原点进行缩放，默认值1，2d变换相关函数有scale()、scaleX()和scaleY()。当元素缩放后若进行位移操作，数值类型的位移要乘以缩放比例；百分比类型的位移要基于原来元素的宽高，把宽高换算成数值类型再乘以缩放比例。

语法：scale(x [,y]?)

x表示水平方向缩放比例，y表示垂直方向缩放比例，当y值不存在时相当于y = x。scaleX(x)相当于scale(x, 1)， scaleY(y)相当于scale(1, y)。当x值或y值为负值时，元素先进行翻转在缩放。

例2演示效果

skew函数

skew倾斜函数可以让元素基于变形原点进行角度倾斜，2d倾斜相关函数有skew()、skewX()和skewY()。当元素倾斜后，x轴和y轴也跟着倾斜，所以元素若再进行其他变形操作，则沿着倾斜后的x轴和y轴进行变形。

语法：skew(xdeg [,ydeg]?)

x表示y轴向x轴倾斜的度数，y表示x轴向y轴倾斜的度数，当y值不存在时相当于y=0。skewX(xdeg)相当于skew(xdeg, 0)，skewY(ydeg
)相当于skew(0, ydeg)。

当x > 0时，表示y轴向x轴正方向倾斜；x < 0时，表示y轴向x轴负方向倾斜。
当y > 0时，表示x轴向y轴正方向倾斜；当y < 0时，表示x轴向y轴负方向倾斜。

例3例4演示效果

rotate()函数

rotate旋转函数让元素根据变形原点顺时针旋转指定度数，默认值0deg，2d旋转相关的函数只有rotate()。当元素旋转后，元素的x轴和y轴也发生旋转，所以若再进行其他变形操作，则沿着旋转后的x轴和y轴变形。

语法：rotate(ndeg)

当n为正值时元素顺时针旋转，n为负值时元素逆时针旋转。

例5演示效果

transform

transform变形函数是上面一系列函数的集合，初始值none。上面介绍的位移、缩放、倾斜和旋转四个函数中，只有位移和变形原点是无关的。

transform可以接受多个值，多个变形函数使用空格间隔，并且按照顺序依次执行。

例6演示效果