CSS 3D-优快云博客

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>3D</title>
       <style>
           body {
               /* 透视,视距:值越大成像越小,反之 */
               perspective: 1000px;
           }

           div {
               width: 400px;
               height: 450px;
               border: 1px solid greenyellow;
           }

           .box1 {
               margin: 200px auto;
               /* 开启3D空间效果 */
               transform-style: preserve-3d;
           }

           .box2 {
               transition: all 1s linear;
           }

           .box1:hover .box2 {
               /* transform: rotateX(-45deg);
               transform-origin: left bottom; */
               /* transform: translateZ(100px); */
               /* transform: translate3d(100px,200px,300px); */
               /* transform: rotateZ(45deg); */
               /* 3D旋转:1表示有旋转,0表示没有旋转 */
               transform: rotate3d(0,1,0,45deg);
           }
       </style>
   </head>
   <body>
       <div class="box1">
           <div class="box2"></div>
       </div>
   </body>
</html>