网页中的三维坐标系
3D移动translate3d(x,y,z)
3D旋转rotated(x,y,z)
CSS
<style>
body{
perspective: 500px;
}
img{
display: block;
margin: 100px auto;
transition: all 2s;
}
img:hover {
cursor: pointer;
transform: rotateX(180deg);
}
</style>
HTML
X轴旋转案例
<body>
<img src="./media/pig.jpg" alt="">
</body>
效果图
Y轴旋转案例
CSS
<style>
body{
perspective: 500px;
}
img{
display: block;
margin: 100px auto;
transition: all 2s;
}
img:hover {
cursor: pointer;
transform: rotateY(180deg);
}
</style>
效果图
左手准则
X轴
Y轴