1.transiate(x,y) 设置盒子位移
<!DOCTYPE html>
<html">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#div1{
width:200px;
height:100px;
background-color: #C5C5C5;
}
/*设置当前元素样式*/
#div2{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:translateY(40px); //transiateX(),transiateY()
}
#div3{
width:200px;
height:100px;
color:white;
background-color: #00FF00;
text-align:center;
transform:translate(20px,50px); //transiate(x,y)
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">我沿y轴向下移动40px</div>
<div id="div3">不解释自己看</div>
</div>
</body>
</html>
2.scale(x,y) 设置盒子缩放
其中x,y 是指x,y轴与原来图像的比例。 -无穷 < x/y<+无穷
（0 < x/y <∞） （-∞ < x/y < 0 取值，会让我们现在图像为 原来图像的镜像反转）
<!DOCTYPE html>
<html">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#div1{
width:200px;
height:100px;
background-color: #C5C5C5;
}
/*设置当前元素样式*/
#div2{
width:200px;
height:100px;
color:white;
background-color: #3EDFF4;
text-align:center;
transform:scale(0.8,0.8);
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
3.rotate(deg) 设置盒子旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
transform:rotate(9deg); // 9是度数，
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.skew(x-angle,y-angle) 设置盒子斜切
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
transition:all 2s;
margin: 150px auto;
}
.div1{
background-color: #f00;
}
.div2{
background-color: #0f0;
}
.div1:hover {
transform:skew(0,30deg);
transform-origin: left top;
}
.div2:hover {
transform:skew(30deg,0);
transform-origin: left top;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
