2D转换模式：transform
1、transform: rotate(45deg); 旋转。
2、tranform：translate(水平方向, 垂直方向)；
正数向正方向移动，负数相反 。
3、transform: scale(水平，垂直)；
第一个参数：水平
第二个参数：垂直
取值等于1，不变。
大于1，变大。
小于1，变小。
如果两个参数值相同，则可以简写一个参数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2D转换</title>
<style>
*{
margin: 0;
padding: 0
}
ul{
width: 800px;
height: 500px;
border: 1px solid #000;
margin: 0 auto;
}
ul li{
list-style: none;
width: 100px;
height: 50px;
background-color: pink;
margin: 0 auto;
margin-top: 50px;
text-align: center;
line-height: 50px;
}
ul li:nth-child(2){
transform: rotate(45deg);
}
ul li:nth-child(3){
transform: translate(100px, 0px);
}
ul li:nth-child(4){
transform: scale(1.5, 1);
}
ul li:nth-child(5){
transform: rotate(45deg) translate(100px, 0) scale(1.5, 1.5);
}
</style>
</head>
<body>
<ul>
<li>正常的</li>
<li>旋转的</li>
<li>平移的</li>
<li>缩放的</li>
<li>综合的</li>
</ul>
</body>
</html>
/*
注意：
1.多个属性叠加时，空格隔开
2.rotate会改变坐标轴的原始方向（旋转后在平移）
*/