转载请注明出处: http://qiudeqing.com/css3/2015/06/14/transform.html

CSS transform

transform可以修改元素的可视化模型，类似于position: relative;之后位置偏移，只修改视觉显示，不会影响旁边元素的布局。

先按照常规布局绘制元素，确定布局和显示之后应用transform规则修改视觉效果。

使用transform可以对元素视图进行移动，旋转，缩放，skew。

设置none以外的取值时，会创建一个[stacking context]，这个上下文会成为内部position: fixed元素的包含块。

百分数长度计算依据为元素吃尺寸.

transform-origin

transform默认的原点是元素的中心(50%, 50%)处，使用transform-origin可以修改原点位置。

transform-style

效果和解释: https://www.webkit.org/blog-files/3d-transforms/transform-style.html

2D transform

rotate(deg)

deg为正时将元素顺时针旋转对应角度，为负时逆时针旋转对应角度。旋转中心为transform-origin

如下面的例子：

旋转矩形后面的灰色矩形模拟元素原始的位置。

scale(x, y)

以transform-origin为中心缩放元素，x,y大于1时放大，小于1时缩小。

translate(x, y)

根据指定的x，y移动元素

skewX(deg)

以transform-origin为中心，将元素在X轴上倾斜，使元素竖直方向于Y轴产生deg度夹角

skexY(deg)

以transform-origin为中心，将元素在Y轴上倾斜，使元素水平方向于X轴产生deg度夹角

matrix(a, b, c, d, e, f)

所有2d transform都可以通过matrix() 实现，window.getComputedStyle()返回的transform对应值也是matirx()表示

2d transform 实现立方体效果

3D transform

尽量使用foo3d()版本的函数以减少hardware compositing以提高性能(rotate3d太难计算了http://stackoverflow.com/questions/15207351/rotate3d-shorthand)

3d transform需要建立一个视角(perspective), 有以下两种方式建立视角:

两种方法的区别是父元素上使用perspective属性创建的节点为所有子节点共用, 单独在元素 上使用的perspective()函数为每个元素创建视角

想象一个金字塔位于z平面和观察者之间, 金字塔的底部平行于z平面且位于坐标0处. perspective的值表示金字塔顶部到 z平面的距离, 类似于摄像机镜头的位置, 它的值越大, 金字塔越尖, 元素变换看起来就越不明显, 通常700到1000被认为是 正常距离, 可以用来作为初始值开始调整.

perspective-origin用于控制视点的位置MDN perspective-origin demo

rotateX(deg)

以x轴方向为轴旋转元素

rotateY(deg)

以y轴方向为轴旋转元素

rotateZ(deg)

以z轴方向为轴旋转元素

参考资料