关于CSS3的平面变形transform
该属性用于实现文字或图像的旋转,缩放,移动,倾斜,矩形变换等。
主要语法如下:
transform: none|transform-functions;
其中none为其默认值,适用于内联元素和块元素。表示不进行变形。
而transform-functions表示可以设置变形函数。也可以设置一个至多个变形函数列表。
🥑常用函数包括以下5种:
translate():移动元素对象,基于x,y坐标重新定位元素。
Scale():缩放元素对象,可以使任意元素对象尺寸发生变化,取值包括正数,负数和小数。
rotate():旋转元素对象,取值为一个度数值。
skew():倾斜元素对象,取值为一个度数值。
matrix():定义矩形变换,基于x.y坐标重新定位元素。
❌注意:
在使用transform属性必须考虑到浏览器兼容问题,否则会出现问题。
Firefox需要添加-moz-前缀。
Translate移动
语法:transform:translate(x,y)
其中x指在水平方向上移动的距离。
y指在垂直方向上移动的距离。
x和y可以为负值,表示反方向移动元素。
div:hover{
-webkit-transform: translate(200px,