.tr1 { transform:translate(50px, 100px) }
向右移动 50px、向下移动 100px。
.tr2 { transform:scale(2, 4) }
X 方向放大 2 倍,Y 方向放大 4 倍。
.tr3 { transform:rotate(30deg) }
顺时间旋转 30 度。
.tr4 { transform:skew(30deg, 40deg) }
以中间为中心在上边向左拉、下边向右拉 30 度,以中间为中心左边向上拉、右边向下拉 40 度。
.tr5 { transform:matrix() }
这个,就是把上面的效果全部用一个方法来实现,但是参数实在太多,我觉得没必要,谁记得住呀,这些又不常用,所以我参数都懒得写。
上述代码中,那些带两个参数的,都可以拆分为带 X、Y 的属性,比如 translateX、translateY、skewX、skewY。
transform 与 transition 配合产生过渡效果
请见这个示例纯 CSS 3 动画实例-Tab 背景切换的动态效果。