Tetegw
4/8/2018 - 3:18 AM

3d透视效果

css3 3d透视效果

3d透视效果
content_copyfile_download
<!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>