CSS3变形是一些效果的集合,如平移、旋转、缩放、倾斜效果,每个效果都可以称为变形(transform),它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.mm{
height: 20px;
width: 20px;
}
img{
/* 平移函数,基于X、Y坐标重新定位元素的位置 */
transform: translate(100px,100px);
/* 缩放函数,可以使任意元素对象尺寸发生变化 */
transform: scale();
/* 旋转函数,取值是一个度数值 */
transform: rotate(30deg);
/* 倾斜函数,取值是一个度数值 */
transform: skew(0deg,50deg);
}
</style>
</head>
<body>
<img src="img/mm1.gif" class="mm">
</body>
</html>
translate():平移函数,基于X、Y坐标重新定位元素的位置
translateX(0px) 表示只设置X轴的位移
transform:translate(100px,0)=transform:translateX(100px)
translateY(0px) 表示只设置Y轴的位移
transform:translate(0,100px)=transform:translateY(100px)
scale():缩放函数,可以使任意元素对象尺寸发生变化
scale()函数可以只接收一个值,也可以接收两个值,只有一个值时,第二个值默认和第一个值相等
scaleX(0):表示只设置X轴的缩放
transform:scale(2,0)=transform:scaleX(2)
scaleY(0):表示只设置Y轴的缩放
transform:scale(0,2)=transform:scaleY(2)
rotate():旋转函数,取值是一个度数值
rotate(a)
参数a单位使用deg表示
参数a取正值时元素相对原来中心顺时针旋转
skew():倾斜函数,取值是一个度数值
可以仅设置沿着X轴或Y轴方向倾斜
skewX(0deg):表示只设置X轴的倾斜
transform:ratate(10deg,0)=transform:ratateX(10deg)
skewY(0deg):表示只设置Y轴的倾斜
transform:ratate(0,10deg)=transform:ratateY(10deg)
注:
translate单位是px,rotate、skew单位是deg(度数)
rotate( )函数只是旋转,而不会改变元素的形状
skew( )函数是倾斜,元素不会旋转,会改变元素的形状