2024年4月29日发(作者：)

transform

属性

E{transform:function{value};}

1.

旋转

E{transform:rotate(value);}//value是一个角度值

旋转后的元素会保持它在文档流中的位置，后续的元素会受到它以及它的padding和margin

的影响，但变换后的元素不影响页面的布局，它会位于页面剩余部分之上的一个新层中。

变换的原点

E{transform-origin:value(s);}//value为关键词或者百分比值，若写一个，另一个为center/50%

原点默认为元素绝对中心（水平和垂直中心交点）。

例：

E{transform-origin:00;}或者E{transform-origin:lefttop;}//原点在左上角

2.

平移

E{transform:translateX(value);}

E{transform:translateY(value);}

E{transform:translate(translateX,translateY);}

value为长度值或百分比值，可以为负值，被变换的元素会保留它的位置，被变换的是元素

的图像，而不是元素本身。

例：

E{transform:translate(20px,-15%);}//Y轴沿着向上的方向移动自身高度的15%

3.

倾斜

E{transform:skewX(value);}

E{transform:skewY(value);}

E{transform:skew(skewX,skewY);}

skew函数允许修改元素的水平轴或垂直轴的角度，value值是角度值，可以使用负值，如果

只写一个值，默认为x方向，另一个默认为0。

4.

缩放

Scale函数，可以让一个元素与原来相比变得更大或更小。Value值无单位，给出的是一个尺

寸比例，默认为1，可以为负数，负值的效果就是水平或垂直翻转元素，以相同大小创建原

元素的“映射”。如果只写一个值，另一个默认相同。

E{transform:scaleX(value);}

E{transform:scaleY(value);}

E{transform:scale(scaleX,scaleY);}

5.

多重变换

可以在一个单独的元素上应用多重变换，只需要在transform属性中用空格隔开列出多个函

数既可以。

例：

h2{transform:rotate(-40deg)scale(0.75)translate(-40%,-400%);}

使用矩阵变换元素

matrix函数

E{transform:matrix(a,b,c,d,X,Y);}//所有默认值均为0，可以实现所有以上效果

使用

webkit

反射（倒影）

E{-webkit-box-reflect:directionoffsetmask-box-image;}

第一个值direction是一个关键字，设置反射相对元素应该出现的位置，分别有：above、below、

left或right。offset是一个长度值，设置元素和反射之间的距离。最后一个值可选，允许把

一张图片设置为遮罩。