CSS3 transform、transform-origin属性

transform属性

• CSS3 transform属性 应用于元素的2D或3D转换,允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
• 它只能转换由盒模型定位的元素。所以**元素必须具有display: block**。
• MDN

属性值

• 一个或多个CSS变换函数 或 关键字值none 。 变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。
• MDN 属性值详解
• 属性值：rotate的例子

translate(x,y)平移

rotate(x turn/deg)旋转

• 参数单位：
  • turn：转，0.5 turn = 180 deg
  • deg：角度，1 deg = 1度

---

transform-origin 属性

• transform-origin CSS属性让你更改一个元素变形的原点。
• 例子可参考MDN
• 属性值：可以是1/2/3个，其中每个值都表示一个偏移量，没有明确定义的偏移将重置为其对应的初始值。
  • 1个值：表示水平偏移量,必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个。
  • 2个值:值1表示水平偏移量，值2表示垂直偏移量,2个都必须是<length>，<percentage>，或left, center, right关键字中的一个。
  • 3个值：前两个值和只有两个值时的用法相同。第3个值必须是<length>,它始终代表Z轴偏移量。