CSS3 transform 属性
CSS3 transform属性
简介
CSS3 transform属性用来实现2D或3D的图形变形和位置移动，可以让开发者以一种简洁、易于读取和使用的方式，创建复杂的图形和动画效果。
属性值
矩阵函数(matrix())
语法： transform: matrix(a, b, c, d, tx, ty);
- 参数a, b, c, d, tx, ty分别代表了矩阵的六个值。
- 通过matrix()函数创建一个二维的变换矩阵，然后将这个矩阵应用到元素上。通过改变其中的值，可以实现平移、缩放、旋转和倾斜等效果。
平移函数(translate())
语法： transform: translate(x,y);
- 参数x和y分别代表了水平和垂直方向上的位移量，可以是像素值、百分比值或者计算值。
- 可以使用单独的平移函数来使元素在2D平面上沿着x轴和y轴方向平移。如果只传递一个参数，则该参数表示水平方向的位移量，在y轴方向上不会产生位移。
缩放函数(scale())
语法： transform: scale(x,y);
- 参数x和y分别代表了水平和垂直方向上的缩放比例，可以是数字或百分比值。
- 可以使用单独的缩放函数来使元素在2D平面上沿着x轴和y轴方向进行放大或缩小。如果只传递一个参数，则该参数表示同等的水平和垂直缩放比例。
旋转函数(rotate())
语法： transform: rotate(angle);
- 参数angle代表以度数为单位的旋转角度（正数为顺时针旋转，负数为逆时针旋转）。
- 使用旋转函数可以使元素在2D平面上旋转一个指定的角度。旋转点是元素的中心点，可以使用transform-origin属性来改变旋转点的位置。
倾斜函数(skew())
语法： transform: skew(x-angle,y-angle);
- 参数x-angle和y-angle分别代表x轴和y轴方向上的倾斜角度，可以是数字或百分比值。
- 使用倾斜函数可以使元素在2D平面上沿着x轴和y轴方向进行倾斜。
透视函数(perspective())
语法： transform: perspective(depth);
- 参数depth表示距离用户视角的距离，可以是数字值或者length值。
- 通过perspective()函数为元素和它的子元素创建透视效果，在3D场景中用来控制元素的深度感，使元素看起来更加真实。
注意事项
- transform属性是一个CSS3属性，对一些低版本的浏览器并不支持。
- 转换函数的参数的值有时是统一的，有时是互相独立的。
- 元素的变形不会改变元素的实际大小、形状或者布局，但是它们可能会影响元素的包含框大小及其相对于其他元素的位置。
- 在使用2D变形时，可以只使用其中的一种函数来实现效果，也可以用多个函数组合来实现更加复杂的效果。
- 在使用3D变形时，必须使用perspective()函数来创建透视效果。同时必须使用一些额外的属性，如rotateX、rotateY、rotateZ、translateZ来控制3D变形。