<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .out { width: 500px; height: 500px; border: 1px solid #000; background-color: blue; margin: 100px auto; /* 透视设置的是用户眼睛和屏幕的距离 仅仅只是视觉呈现出的3D效果，并不是真正的3D, 可以通过添加 transform: rotateY(10deg); 查看源码增大角度进行查看真假 */ perspective: 400px; /* transform: rotateY(10deg); */ } .in { width: 300px; height: 300px; background-color: red; margin: 100px auto; transition: all 1s; } .out:hover .in { transform: translateX(200px) rotateY(123deg); } </style> </head> <body> <div class="out"> <div class="in"></div> </div> </body> </html>
- demo 效果
