有趣的 CSS 3-2D 变幻

作者:vkvi 来源:千一网络(原创) 日期: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 的属性,比如 skewX、skewY。

你前面那位网友看了:推荐一个免费控件站点(WinForms、ASP.NET、WPF、Silverlight)

▲▲▲嘿,欢迎转载传播本站原创文章,尽量保留来源噢。▲▲▲

文章评论
标题:必填
内容:
本站永远终止与捏造“罪名”不支付广告费的某度联盟合作。
vkvi
vkvi

作者简介: vkvi,致力于 .NET Web 开发、移动开发的技术推广,在 .NET、SQL Server、Windows Server 等方面有深入研究和丰富经验,10 年间共计撰写文章 4000 余篇。 主持金融、国土、农业、电商等多个行业项目执行, 推行“技术提升生产力、人心决定成功率”的管理理论。 联系他