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( )函数是倾斜，元素不会旋转，会改变元素的形状
5951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
