CSS3 transform属性详解 CSS3 transform属性使用教程

作者：袖梨 2022-06-25

语法：

transform：none | matrix(,,,,,)? translate([,])? translateX()? translateY()? rotate()? scale([,])? scaleX()? scaleY()? skew([,])? skewX() || skewY()?

默认值：none

取值：

none：无转换

matrix(,,,,,)：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵

translate([, ])：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translateX()：指定对象X轴（水平方向）的平移

translateY()：指定对象Y轴（垂直方向）的平移

rotate()：指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义

scale([, ])：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

scaleX()：指定对象X轴的（水平方向）缩放

scaleY()：指定对象Y轴的（垂直方向）缩放

skew( [, ])：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

skewX()：指定对象X轴的（水平方向）扭曲

skewY()：指定对象Y轴的（垂直方向）扭曲

说明：

设置或检索对象的转换。

对应的脚本特性为transform。

兼容性：

写法：

内核类型	写法
Webkit(Chrome/Safari)	-webkit-transform
Gecko(Firefox)	-moz-transform
Presto(Opera)	-o-transform
Trident(IE)	-ms-transform
W3C	transform

示例：

CSS 2D transform_CSS参考手册_web前端开发参考手册系列

矩阵变换：matrix()

transform:matrix(0,1,1,1,10,10)

平移：translate(), translateX(), translateY()

transform:translate(5%,10px)

transform:translate(-10px,-10px)

transform:translateX(20px)

transform:translate(20px)

transform:translateY(10px)

transform:translate(0,10px)

旋转：rotate()

transform:rotate(-15deg)

transform:rotate(15deg)

缩放：scale()

transform:scale(.8)

transform:scale(1.2)

扭曲：skew()

transform:skew(-5deg)

transform:skew(-5deg,-5deg)