CSS3 变形(transform)属性
让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以移动、旋转和缩放元素
语法
transform : none | <transform-function> [<transform-function>]* ;
默认值
transform : none ;
兼容性
IE12+, Firefox16+, Chrome36+, Safari16+, Opera23+
CSS3 2D转换
旋转rotate
通过指定的角度参数对原元素指定一个2D rotation (2D旋转)
语法
transform: rotate(<angle>);
angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转
.box{
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);
}
移动translate
根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动
三种情况
- translateX(x) 仅水平方向移动(X轴移动)
- translateY(y) 仅垂直方向移动(Y轴移动)
- translate(x,y) 水平方向和垂直方向同时移动(X轴和Y轴同时移动)
语法
transform: translateX(<translation-value>);transform: translateY(<translation-value>);transform: translate(<translation-value>[, <translation-value>]);
translation-value指移动，正数表示向右或向下，负数表示向左或向上
.box1{
transform: translateX(200px);
}
.box2{
transform: translateY(200px);
}
.box3{
transform: translate(200px,100px);
}
缩放scale
指定对象的2D scale（2D缩放）
三种情况
- scaleX(x) 仅水平方向缩放(X轴缩放)
- scaleY(y) 仅垂直方向缩放(Y轴缩放)
- scale(x,y) 水平方向和垂直方向同时缩放(X轴和Y轴同时缩放)
语法
transform: scaleX(<number>);transform: scaleY(<number>);transform: scale(<number>[, <number>]);
number指缩放倍数，缩放原点在中心
.box1{
transform: scaleX(2);
}
.box2{
transform: scaleY(2);
}
.box3{
transform: scale(2,4);
}
扭曲skew
指定对象的skew transformation（斜切扭曲）
三种情况
- skewX(x) 仅水平方向扭曲变形(X轴扭曲变形)
- skewY(y) 仅垂直方向扭曲变形(Y轴扭曲变形)
- skew(x,y) 水平方向和垂直方向同时扭曲变形(X轴和Y轴同时扭曲变形)
语法
transform: skewX(<angle>);transform: skewY(<angle>);transform: skew(<angle>[, <angle>]);
angle指斜切角度
- X正值逆时针斜切，负值顺时针斜切
- Y正值顺时针斜切，负值逆时针斜切
.box1{
transform: skewX(10deg);
}
.box2{
transform: skewY(20deg);
}
.box3{
transform: skew(20deg,40deg);
}
矩阵matrix
以一个含六个值的变换矩阵的形式指定一个2D变换
文章最后有详细记录
语法
transform: matrix(a, b, c, d, e, f);
CSS3 3D转换
旋转rotate
旋转rotateX
指定对象在X轴上的旋转角度
语法
transform: rotateX(angle);
旋转rotateY
指定对象在Y轴上的旋转角度
语法
transform: rotateY(angle);
旋转rotateZ
指定对象在Z轴上的旋转角度
语法
transform: rotateZ(angle);
旋转rotate3d
指定对象的3D旋转角度
语法
transform: rotate3d(x,y,z,angle);
参数说明
前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
移动translate
移动translateZ
指定对象的Z轴位移
语法
transform: translateZ(z);
移动translate3d
指定对象的3D位移
语法
transform: translate3d(x,y,z);
缩放scale
缩放scaleZ
指定对象的Z轴缩放
语法
transform: scaleZ(z);
缩放scale3d
指定对象的3D缩放
语法
transform: scale3d(x,y,z);
矩阵matrix3d
以一个4x4矩阵的形式指定一个3D变换
语法
transform: matrix(sx,n,n,n,n,sy,n,n,n,n,sz,n,n,n,n,1);
参数说明
使用16个值得4X4矩阵
CSS3 Transform与坐标系统
transform-origin属性
允许更改转换元素的位置
语法
transform-origin: x-axis y-axis z-axis;
参数说明
x-axis定义视图被置于 X 轴的何处。可能的值：left / center / right / length / %y-axis定义视图被置于 Y 轴的何处。可能的值：top / center / bottom / length / %z-axis定义视图被置于 Z 轴的何处。可能的值：length
CSS3矩阵
语法
transform: matrix(a,b,c,d,e,f);
这6个参数，对应的矩阵：
矩阵的计算
- 其中，x, y表示转换元素的所有坐标（变量）了
ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直坐标
移动translate
transform: matrix(1, 0, 0, 1, tx, ty);就等同于transform: translate(x, y);
- 变换后的水平坐标为
ax+cy+e=x+0+tx=x+tx,也就是X轴方向偏移了tx - 变换后的垂直坐标为
bx+dy+f=0+y+ty=y+ty,也就是X轴方向偏移了ty
缩放scale
transform: matrix(sx, 0, 0, sy, 0, 0);就等同于transform: scale(sx,sy);
- 变换后的水平坐标为
ax+cy+e=0+0+tx=sx*x,也就是X轴方向缩放了sx倍 - 变换后的垂直坐标为
bx+dy+f=0+0+ty=sy*y,也就是X轴方向缩放了sy倍
旋转rotate
transform: matrix(cosθ,sinθ,-sinθ,cosθ,0,0);就等同于transform: rotate(θdeg);
- 变换后的水平坐标为
ax+cy+e=0+0+tx=x*cosθ-y*sinθ - 变换后的垂直坐标为
bx+dy+f=0+0+ty=x*sinθ+y*cosθ
拉伸skew
transform: matrix(1,tan(θy),tan(θx),1,0,0);就等同于transform: skew(θxdeg,θydeg);
- 变换后的水平坐标为
ax+cy+e=0+0+tx=x+y*tan(θx) - 变换后的垂直坐标为
bx+dy+f=0+0+ty=x*tan(θy)+y
CSS3 扩展属性
transform-style
指定嵌套元素是怎样在三维空间中呈现
语法
transform-style: flat|preserve-3d;
flat(默认) 子元素将不保留其 3D 位置preserve-3d子元素将保留其 3D 位置
perspective
指定观察者与
z=0平面的距离，使具有三维位置变换的元素产生透视效果
语法
perspective: number|none;
none(默认) 与 0 相同，不设置透视number元素距离视图的距离，以像素计
perspective-origin
允许您改变 3D 元素的底部位置
语法
perspective-origin: x-axis y-axis;
参数说明
x-axis定义视图被置于 X 轴的何处，默认为50%，可能的值：left / center / right / length / %y-axis定义视图被置于 Y 轴的何处，默认为50%，可能的值：top / center / bottom / length / %
backface-visibility
指定元素背面面向用户时是否可见
语法
backface-visibility: visible|hidden;
visible(默认) 背面是可见的hidden背面是不可见的