CSS3中的transform

transform

transform可以用来设置元素的形状改变，主要有以下几种变形：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形），语法如下：

.transform-class {
    transform ： none | <transform-function> [ <transform-function> ]*；
    }

none表示不做变换；<transform-function>表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在()里面，用空格分开，例如：

.transform-class {
    transform ： rotate(30deg) scale(2,3);
    }

transform-origin 基点

所有的变形都是基于基点，基点默认为元素的中心点。用法：transform-origin: (x, y)，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用left、center、right；y 可以用top、center、bottom。

.transform-class {
    transform-origin: (left, bottom);
    }

rotate 旋转

用法：rotate(<angle>)；表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转，例如：

.transform-rotate {
    transform: rotate(30deg);
    }

scale 缩放

它有三种用法：scale(<number>[, <number>])、scaleX(<number>)和scaleY(<number>)；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。

.transform-scale {
    transform: scale(2,1.5);
    }

.transform-scaleX {
    transform: scaleX(2);
    }

.transform-scaleY {
    transform: scaleY(1.5);
    }

translate 移动

移动也分三种情况：translate(<translation-value>[<translation-value>])、translateX(<translation-value>)和translateY(<translation-value>)；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位：px、rem等;

.transform-translate {
    transform: translate(400px, 20px)
    }

.transform-translateX {
    transform: translateX(300px);
    }

.transform-translateY {
    transform: translateY(20px);
    }

skew 扭曲

扭曲同样也有三种情况，skew(<angle>[, <angle>])、skewX(<angle>)和skewY(<angle>)；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。

.transform-skew {
    transform: skew(30deg, 10deg);
    }

.transform-skewX {
    transform: skewX(30deg);
    }

.transform-skewY {
    transform: skewY(10deg);
    }

transition

transition是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：

• transition-property（变换的属性，即那种形式的变换：大小、位置、扭曲等）；
• transition-duration（变换延续的时间）
• transition-timing-function（变换的速率）
• transition-delay（变换的延时）

.transition-class {
    transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*;
    }

transition-property

它是用来设置哪些属性的改变会有这种平滑过渡的效果，主要有以下值：

• none；
• all；
• 元素属性名：

color；
length；
visibility；
...

.transition-property {
    transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*;
    }

transition-duration

它是用来设置转换过程的持续时间，单位是s或者ms，默认值为0；

.transition-duration {
    transition-duration ： <time> [, <time>]* ;
}

transition-timing-function

它是来设置过渡效果的速率，它有6种形式的速率：

• ease：逐渐变慢（默认），等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；
• linear：匀速，等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
• ease-in：加速，等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)；
• ease-out：减速，等同于贝塞尔曲线(0, 0, 0.58, 1.0)；
• ease-in-out：先加速后减速，等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
• cubic-bezier：自定义贝塞尔曲线。

.transition-timing {
    transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*;
}

贝塞尔曲线

transition-delay

它是来设置过渡动画开始执行的时间，单位是s或者ms，默认值为0；

.transition-delay {
    transition-delay ： <time> [, <time>]*;
}

transition

它是transition-property、transition-duration、transition-timing-function、transition-delay的简写：

.transition {
    transition ：<property> <duration> <timing function> <delay>;
}

设置 transform时，一定要注意顺序，先旋转后位移和先位移后旋转的位置不同

• function

2D Transform Functions属性表

transform属性	说明
matrix()	以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()	指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translatex()	指定对象X轴（水平方向）的平移
translatey()	指定对象Y轴（垂直方向）的平移
rotate()	指定对象的2D rotation（2D旋转），需先有 <’ transform-origin '> 属性的定义
scale()	指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scalex()	指定对象X轴的（水平方向）缩放
scaley()	指定对象Y轴的（垂直方向）缩放
skew()	指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewx()	指定对象X轴的（水平方向）扭曲
skewy()	指定对象Y轴的（垂直方向）扭曲

3D Transform Functions属性表

transform属性	说明
matrix3d()	以一个4x4矩阵的形式指定一个3D变换
translate3d()	指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translatez()	指定对象Z轴的平移
rotate3d()	指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
rotatex()	指定对象在x轴上的旋转角度
rotatey()	指定对象在y轴上的旋转角度
rotatez()	指定对象在z轴上的旋转角度
scale3d()	指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
scalez()	指定对象的z轴缩放
perspective()	指定透视距离