1.旋转 rotate(度数deg)
2.位移translate(x轴位移,y轴位移)
3.缩放scale(水平缩放值,垂直缩放值)
4.倾斜skew(度数deg)
3.translate使用于居中显示
方法一:父级position:relative
子级: position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
<html>
<style>
div{
position:relative;
width:200px;
height:200px;
background-color:skyblue;
}
.p1{
position:absolute;
width:100px;
height:100px;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
background-color:pink;
transition:transform 1s;
transform:rotate(45deg);
}
div:hover .p1{
transform:rotate(360deg);
}
</style>
<body>
<div>
<p class="p1"></p>
</div>
</body>
</html>
方法二:
transform:translate(-50%,-50%)
在这里插入代码片
<html>
<style>
div{
position:relative;
width:200px;
height:200px;
background-color:skyblue;
}
.p1{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:100px;
height:100px;
background-color:pink;
}
</style>
<body>
<div>
<p class="p1"></p>
</div>
</body>
</html>