§ ITPOW >> 文档 >> CSS

有趣的 CSS 3-2D 变幻(transform)

作者:vkvi 来源:ITPOW(原创) 日期:2016-11-12

.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 背景切换的动态效果

相关文章