目录
一：透视 ： perspective:500px;值越小，离屏幕越近
一：透视 ： perspective:500px;值越小，离屏幕越近
加透视和不加透视的区别：
二：3D旋转要加透视的
①X轴45度(deg)：
<style>
body {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateX(45deg);
}
</style>
</head>
<body>
<img src="../media/pig.jpg" alt="">
</body>②Y轴45度（deg）:
<style>
body {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateY(45deg);
}
</style>
</head>
<body>
<img src="../media/pig.jpg" alt="">
</body>③Z轴45deg
<style>
body {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
/* transform: rotateZ(180deg); */
/* transform: rotate3d(x,y,z,deg); */
/* transform: rotate3d(1, 0, 0, 45deg); */
/* transform: rotate3d(0, 1, 0, 45deg); */
transform: rotate3d(1, 1, 0, 45deg);
}
</style>
</head>
<body>
<img src="../media/pig.jpg" alt="">
</body>