#

transform 属性

transform属性允许对某一个元素进行形变，缩放， 倾斜或者平移等

注意

并不是所有的盒子都可以进行 transform 的转换，通常行内级元素不能进行形变

常见的函数transform function有

• 平移: translate(x, y)
• 缩放: scale(x, y)
• 旋转: rotate(deg)
• 倾斜: skew(deg, deg)

translate --- 位移

语法:

translate(x, y)

作用

这个 CSS 函数用于移动元素在平面上的位置

值的个数

• 一个值时，设置在 X 轴上的位移
• 两个值时，设置在 X 轴和 Y 轴上的位移

值的类型

• 数字
• 百分比，百分比数值是参照元素本身, 即移动元素的本身

补充

1. translate是translateX和translateY函数的简写
2. translate的百分比可以完成一个元素的水平和垂直居中
3. translate函数相对于flex布局的兼容性会好一点

scale --- 缩放

语法

scale(x, y)

作用

scale()CSS 函数可以改变元素的大小，改变是相对于自身

值的个数

• 数字
  • 1 保持不变
  • 0.5 缩小一倍
  • 2 放大一倍
• 百分比： 百分比不常用

scale函数是scaleX和scaleY的缩写

rotate --- 缩放

语法

rotate(<angle>)

作用

旋转元素

值的个数

一个值时表示旋转的角度

值的类型

• 常用的单位deg 表示旋转的角度
• 正数是顺时针旋转
• 负数是逆时针旋转

transform-origin --- 变形的原点

说明

transform-origin表示形变的原点，比如在进行scale缩放或者rotate旋转时都会有一个原点

值的个数

• 一个值设置 X 轴的原点
• 两个值分别是设置 X 轴和 Y 轴的原点
• 值必须是length,percentage或者left,center,right,top,bottom关键字中的一个
  • left, right, top, bottom 是关键字
  • length: 从左上角开始计算
  • 百分比: 参考元素本身的大小

skew --- 倾斜

语法

skew(x, y)

作用

函数定义了一个元素在二维平面上的倾斜转换

值的个数

• 一个值表示在 X 轴上的倾斜
• 两个值分别是设置 X 轴和 Y 轴上的倾斜

值的类型

• deg: 表示倾斜的角度
• 正数表示顺时针
• 负数表示逆时针

CSS 文档中部分符号指示

例如：<transform-function>+这里的+表示一个或者多个，并且多个之间使用空格隔开 <box-shadow>#这里#表示一个或者多个，多个直接使用,隔开

transform 同时设置多个值

当transform需要同时设置多个值是，不能分开写，否则后面写的会覆盖前面的内容，当需要同时设置多个值时格式为transform: translate() scale() rotate()