CSS_变换(transform)

什么是变换

变换也叫转换（翻译不同而已）。

转换可以让一个block元素位移或者变形。（inline元素不支持）

transform: [转换语句1] [转换语句2] [...]

多个转换语句会依次执行。

transform语句很多…具体的查看MDN文档吧。

常用的有以下几种：

• 位移：translate(X, Y)

  将一个元素分别向右，向下移动。接受的参数可以为：具体的像素值，或者元素本身对应的尺寸的百分数。X的位置是宽度，Y的位置是高度。

  可以分别写成translateX()和translateY()，分别控制向右和向下移动（可以为负数，方向相反）。

• 缩放： scale()

  将一个元素沿中心放大指定的倍数。0~1倍为缩小。可以分别写成scaleX()和scaleY()，分别控制两个轴上的缩放。

• 旋转：rotate(45deg)

  将一个元素沿中心旋转。1度为1deg。正数为顺时针。注意：

  元素旋转实际上是把坐标轴旋转了，因此旋转之后，再进行translate就不是沿着正上下左右，而是沿着旋转后的轴方向走。

Appendix

水平垂直居中（2）

我们又多了一种将子元素垂直水平居中的方式：相对布局结合translate。

请看上图。水平垂直居中说明什么呢？子元素的左上角在父元素中的水平位置=父元素宽度的一半（红色线条）- 自己宽度的一半（橙色线条）。水平方向上如此，垂直方向同理。那么：

/*父元素*/
.outer{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
}

/*子元素*/
.inner{
width: 120px;
height: 80px;
background-color: pink;
/*先将左上角移动到父元素的中间*/
position:absolute;
top:50%;
left:50%;
/*再将左上角在两个方向上各移动自己尺寸的一半*/
transform: translate(-50%,-50%) 
}

怎样看MDN的语法格式

完整版请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax

以transform为例子：

none | <transform-list>
where 
<transform-list> = <transform-function>+

where 
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>

where 
<matrix()> = matrix( <number>#{6} ) /*此处的#{6}表示必须有6个number，中间逗号隔开*/
<translate()> = translate( <length-percentage> , <length-percentage>? )
<translateX()> = translateX( <length-percentage> )
<translateY()> = translateY( <length-percentage> )
<scale()> = scale( <number> , <number>? )/*此处的?表示可以省略*/
/*还有很多，此处略*/

有几点说明：（如果理解正则表达式会好记一些）

• |表示“互斥”，表示这些值只能取1个。

• <>表示一个参数（属性）。

• where表示对上述属性的解释(这个属性怎么写)。

• +表示这个属性可以出现很多次，中间用空格隔开。

• #号表示一个属性/值可以重复一定的次数，中间用英文逗号隔开。

• {}表示一个值可以出现指定的次数，格式为{最少出现次数，最多出现次数}或者{必须出现指定的次数}。

• #和{}可以组合。组合时同时遵循两者的要求。

• ?表示一个值可以省略（出现0或1次）。

首先看第1行：

第1行表示transform可以写成：transform: none或者transform: transform-list。

我们不知道transform-list是什么，没关系，where表示对上面这些属性的解释。此处就是对transform-list是什么东西的解释。

第3行表示transform-list属性可以是：一个或者多个transform-function。

我们不知道transform-funtion是什么，没关系，where表示对上面这些属性的解释。马上就会讲到。

第6行表示transform-function可以是：matrix()，或者translate()，还有其他一堆东西。本来一次只能写一个transform-function，但是由于之前提到transform-list可以是一个或者多个transform-funtion，我们可以把多个变换写在一起，中间用空格隔开。