代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 300px; height: 200px; margin: 100px auto; /* 视距 */ perspective: 800px; } img{ width: 100%; transition: 1s; } .box:hover img{ transform: rotateX(360deg); /* transform: rotateY(60deg); */ /* transform: rotateZ(360deg); */ } </style> </head> <body> <div class="box"> <img src="./images/hero.jpeg" alt=""> </div> </body> </html>
效果图:
移动web-空间转换-空间旋转
最新推荐文章于 2024-10-10 20:59:20 发布