在进行旋转时,我们可以沿着不同的坐标轴旋转,有X轴、Y轴、Z轴。
格式:
transform:rotateX(角度);以X轴旋转
transform:rotateY(角度);以Y轴旋转
transform:rotateZ(角度);以Z轴旋转,默认以Z轴为旋转轴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
height: 300px;
width: 300px;
margin: 0 auto;
perspective: 300px;
}
ul li {
list-style: none;
width: 100px;
height: 100px;
margin-top: 50px;
border: 1px solid #000;
}
ul li img {
width: 100px;
height: 100px;
}
ul li:nth-child(1) img {
transform: rotateX(45deg);
}
ul li:nth-child(2) img {
transform: rotateY(45deg);
}
ul li:nth-child(3) {
transform: rotateZ(45deg);
}
</style>
</head>
<body>
<ul>
<li><img src="111.png" alt=""></li>
<li><img src="111.png" alt=""></li>
<li><img src="111.png" alt=""></li>
</ul>
</body>
</html>