matrix()参数解析

林夕雨

于 2018-01-02 16:28:42 发布

阅读量3.1k

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.youkuaiyun.com/u012798558/article/details/78953063

版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了CSS中的transform:matrix()函数，通过六个参数实现元素的变形效果，包括skew、translate等。实际应用中，开发者可以根据需求调整这些参数来改变元素的形状。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* Opera */
}

transform:matrix();

trans_skew { transform: skew(35deg); }

trans_scale { transform:scale(1, 0.5); }
trans_rotate { transform:rotate(45deg); }

trans_translate { transform:translate(10px, 20px); }

六个参数分别为以上，具体算法为矩阵算法，实际应用中根据实际需求调整元素形状