transform

transform是css的一个属性，该属性允许我们对一个元素进行各种各样的形变操作，包括旋转，缩放，倾斜或平移等

transform是形变的意思，transformer就是变形金刚；

注意事项

并非所有的元素都可以使用transform属性，行内非替换元素和表格相关元素不可以使用transform属性

# transform的值是一个或多个的形变函数
transform: none | <transform-function>+

常见的形变函数有:

函数名	描述	备注
translate(x, y)	平移	translateX和translateY函数的简写方式
scale(x, y)	缩放	scaleX和scaleY函数的简写方式
rotate(deg)	旋转	rotateZ函数的简写方式
skew(deg, deg)	倾斜	skewX和skewY函数的简写方式

transform的特点:

0. 任何的形变函数默认的transform-origin都是center center
1. 元素的形变并不会影响标准流中的布局
2. 如果形变函数中的值可以设置为百分比，那么这些百分比一般相对的元素自身的宽度或高度

位移 - translate

translate函数用于在平面上对元素进行位移操作

参数个数

个数	说明
一个值	设置x轴上的位移
两个值	设置x轴和y轴上的位移

值类型

类型	说明
数字	100px， 10rem等
百分比	参照元素本身( refer to the size of bounding box )

元素的水平和垂直居中方案

缩放 - scale

scale函数可改变元素的大小

值个数

个数	说明
一个值	x轴和y轴缩放相同的值
两个值	设置x轴和y轴上的缩放

值类型:

类型	说明
数字	大于0，小于1 --- 缩放 等于1 --- 不变 大于1 --- 放大
百分比	相对于元素自身的宽度或高度

旋转 - rotate

rotate(<angle>) 可以将元素在平面上进行旋转

当<angle>的值为正数的时候，元素会顺时针旋转

当<angle>的值为负整数的时候，元素会逆时针旋转

值个数

• rotate函数的值只能有一个，表示旋转的角度

值类型:

类似	举例	备注
度 degrees	90deg	最为常用
百分度 gradians	100grad	百分度又称为梯度，主要用于建筑和测量领域 百分度会将圆等分为400分，所以其中90度即为100grad
弧度 radians	0.25turn
圈数 turns	3.1416rad

transform-origin

值的个数

个数	说明
一个值	设置x轴的原点, y轴上的默认值是center
两个值	设置x轴和y轴的原点

值的类型 : 必须是<length>,<percentage>或是left, center, right, top, bottom等多个关键字中的一个

其中X轴上可以设置的关键字为top，center, bottom

其中Y轴上可以设置的关键字为left, center, right

transform-origin中，如果设置的值为<percentage>, 那么其相对的就是自身宽度或高度

skew

skew(x, y)函数定义了元素如何在平面上进行倾斜

对于x轴，正值表示的是向左倾斜，负值表示的是向右倾斜

对于y轴，正值表示的是向下倾斜，负值表示的是向上倾斜

在skew函数中，参数x和参数y的类型都是度数

值个数

个数	说明
一个值	表示x轴上的倾斜, y轴上的值默认为0
两个值	表示x轴和y轴上的倾斜

值类型: skew函数参数的类型可以支持弧度，角度，梯度和圈数，其中最常用的为弧度

设置多个值

   /* transform: translateX(50px);
      transform: scale(1.2);
      transform: rotate(45deg); */

      /* 
        <transform-function>+
          +: 一个或者多个, 并且多个之间以空格分隔
          transform: scale() translate();

        <box-shadow>#
          #: 一个或者多个, 多个之间以, 分隔
          box-shadow: 1px 1px 1px 1px #f00, 
      */