1.===CSS：transform=== - MC_mc - 沸点 - 掘金

前端

1.===CSS：transform===
【说明】：
CSS transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
【取值说明】：
1）transform属性可以指定为关键字值none 或一个或多个<transform-function>值。
2）要应用的一个或多个CSS变换函数。变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。
【取值】：
1）旋转
transform: rotate(45deg); // 方向顺时针
2）缩放
transform: scale(0.5, 2); // 水平方向缩小一半，垂直方向放大一倍。
3）倾斜
transform: skew(30deg，30deg); //水平方向倾斜30度，垂直方向倾斜30度
transform: skew(30deg); // 只在水平方向进行倾斜，垂直方向不倾斜
4）移动
transform: translate(50px, 50%); // 水平方向移动50px，垂直方向移动50%
transform: translate(50px); // 只在水平方向移动，垂直方向不移动
5）矩阵
transform: matrix(a,b,c,d,e,f);
transform: matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);

2.===CSS：transform-origin===
【说明】：
CSS属性，让你更改一个元素变形的原点。
【默认值】：
50% 50% 0
【取值说明】：
1）一个值：
必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个。
2）两个值：
其中一个必须是<length>，<percentage>，或left, center, right关键字中的一个。
另一个必须是<length>，<percentage>，或top, center, bottom关键字中的一个。
3）三个值：
前两个值和只有两个值时的用法相同。
第三个值必须是<length>。它始终代表Z轴偏移量。

展开

今天学到了