transform

最新推荐文章于 2024-01-21 23:14:28 发布

深渊咆哮

最新推荐文章于 2024-01-21 23:14:28 发布

阅读量216

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sj_lpl_sb/article/details/78748644

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>2D形变</title>
       
        <style type="text/css">
           .box{
               height: 60px;
               width: 60px;
               border: 1px solid red;
               background: green;

           }
           .box1{
               height: 60px;
               width: 60px;
               border: 1px solid red;
               background: pink;

           }
           .box2{
               height: 60px;
               width: 60px;
               border: 1px solid red;
               background: blue;

           }
           .box3{
               height: 60px;
               width: 60px;
               border: 1px solid red;
               background: blue;

           }
           .box4{
               height: 60px;
               width: 60px;
               border: 1px solid red;
               background: blue;

           }
           .box5{
               height: 60px;
               width: 60px;
               border: 1px solid red;
               background: yellow;

           }
           .box:hover{
               transform: rotate(30deg);
           }
           .box1:hover{
               transform: scale(2);
           }
           .box2:hover{
               transform: scaleY(0.2) scaleX(3) rotate(30deg);
           }
           .box3:hover{
               transform: skew(30deg,30deg);
           }
           .box4:hover{
               transform:rotateX(30deg) rotateY(50deg) rotateZ(60deg);
               transform-style: preserve-3d;
           }
           .box5:hover{
               transform: matrix(2,30,30,2,20,20);
           }
        </style>
   </head>
   <body>

       <div class="box">

       </div>

       <div class="box1">

       </div>

       <div class="box2">

       </div>
       <div class="box3">

       </div>
       <div class="box4">

       </div>

       <div class="box5">

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