www.cftea.com

有趣的 CSS 3-2D 变幻

千一网络(原创)2016/11/12 20:23:14

.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 的属性,比如 skewX、skewY。

<<返回首页<<