animal 2D 3D

来源：互联网发布：广电网络高清机顶盒编辑：程序博客网时间：2024/04/25 23:53

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           *{
               margin: 10 auto;
           }
           .box{
               width: 60px;
               height: 60px;
               background: red;
           }
           .box1{
               width: 60px;
               height: 60px;
               background: black;
           }
           .box2{
               width: 60px;
               height: 60px;
               background: yellow;
           }
           .box:hover{
               transform: scale(2)rotate(30deg);
           }
           .box1:hover{
               /*transform: rotate(30deg);*/
               /*transform: translate(100px);*/
               /*transform: skew(30deg);*/
               transform: matrix(1,1,1,1,1,1);
           }
           .box2:hover{
               transform: rotateX(30deg)rotateY(30deg)rotateZ(90deg);
               transform-style: preserve-3d;
           }
       </style>
   </head>
   <body>
       <div class="box">

       </div>
       <div class="box1">

       </div>
       <div class="box2">

       </div>
   </body>
</html>

阅读全文

0 0