html 3D透视效果

Posted 2021-05-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 3D透视效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
      .box {
         width: 600px;
         height: 600px;
         border: 1px solid #000;
         margin: 100px auto;
         position: relative;
         perspective:2000px;
      }
      .box img{
         transition: all 1s;
         width: 300px;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%) rotateX(60deg) rotateZ(-15deg);
         box-shadow: -10px 10px 15px rgba(0,0,0,.5);
      }
      .box img:hover{
         transform: translate(-50%, -50%) rotateX(0deg) rotateZ(0deg);
         box-shadow: -200px -200px 15px rgba(0,0,0,0);
      } 
   </style>
</head>
<body>
   <div class="box">
      <img src="image/iphone.jpg"  alt="">
   </div>
</body>
</html>

以上是关于html 3D透视效果的主要内容，如果未能解决你的问题，请参考以下文章

CSS3进阶酷炫的3D旋转透视

CSS3最颠覆性的动画效果，基本属性[3D]

Unity3D Camera透视相机到正交相机插值

Three.js实现可透视的水面效果

Java 中的透视 3D 投影