2D转换时指旋转,平移,缩放及其组合
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
margin: 0 auto;
height: 500px;
width: 500px;
border: 1px solid #000;
}
li{
width: 100px;
height: 40px;
background-color: #5e5e5e;
list-style: none;
text-align: center;
line-height: 40px;
margin: 0 auto;
margin-bottom:70px;
}
li:nth-child(2){
transform: rotate(45deg);
}
li:nth-child(3){
transform: translate(100px,30px);
}
li:nth-child(4){
transform: scale(1.5,1.5);
}
li:nth-child(5){
transform:rotate(45deg) translate(100px,30px) scale(1.5,1.5);
}
</style>
</head>
<body>
<ul>
<li>正常</li>
<li>旋转</li>
<li>平移</li>
<li>缩放</li>
<li>综合使用</li>
</ul>
</body>
</html>
transform: rotate(45deg);是指将顺时针旋转45度
transform: translate(100px,30px);在块元素上存在一个坐标系,水平平移100px,垂直向下平移30px
transform: scale(1.5,1.5);缩放,有两个值,当两个值相同时,写一个即可,水平缩放和垂直缩放。
注意点:当元素旋转了,再平移的时候,坐标系也会进行平移。当我们既要平移也要旋转时,要考虑位置,可以将translate写在rotate的前面。