css-3D变换-transform transform-style开启3D perspective设置景深
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>景深透视</title> <style> /* 3D变换: transform-style: preserve-3d; ---- 开启3D空间 perspective ---- 设置景深 1.设置景深透视的元素,会实现近大远小的3D效果。 2.使用方式:给要实现效果的父元素设置 3.最佳效果的取值范围是:800px-1500px */ #container{ width: 234px; height: 488px; border: 1px solid black; margin: 200px auto; transform-style: preserve-3d; perspective: 800px; } img{ transform-origin: right top; transition:1s all; } #container:hover img{ transform: rotateX(45deg); } </style> </head> <body> <div id="container"> <img src="../imgs/door.png" alt=""> </div> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步