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就不是沿着正上下左右，⽽是沿着旋转后的轴⽅向⾛。
Appendixtransform英文
⽔平垂直居中（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的语法格式
以transform为例⼦：
none | <transform-list>
where
<transform-list> = <transform-function>+
where
<transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scale
X()> | <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，我们可以把多个变换写在⼀起，中间⽤空格隔开。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。