CSS变换效果详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Noviceduderi/article/details/78677625

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           *{
               margin: 0px auto;
               margin-top: 10px;
           }
           p{
               width:50px;
               height: 30px;
           }
           .di1{
               width: 80px;
               height: 80px;
               background: red;
               border: 2px solid chartreuse;
           }
           .di1:hover{
               transform: rotate(150deg);
           }

           .di2{
               width: 80px;
               height: 80px;
               background: red;
               border: 2px solid chartreuse;
               border-radius: 41px;
           }

           .di2:hover{
               transform: scale(2);
               transform-style: preserve-3d;
           }

           .di3{
               width: 80px;
               height: 80px;
               background: red;
               border: 2px solid chartreuse;
               border-radius: 41px;
           }

           .di3:hover{
               transform: translate(100px);
               transform-style: preserve-3d;
           }


           .di4{
               width: 80px;
               height: 80px;
               background: red;
               border: 2px solid chartreuse;
               border-radius: 41px;
           }

           .di4:hover{
               transform: skew(60deg,100deg);
               transform-style: preserve-3d;
           }


           .di5{
               width: 80px;
               height: 80px;
               background: red;
               border: 2px solid chartreuse;
               border-radius: 41px;
           }

           .di5:hover{
               transform: matrix(1,0,0,5,20,10);
               transform-style: preserve-3d;
           }

       </style>
   </head>
   <body>
       <p>旋转</p>
       <div class="di1"></div>
       <p>缩放</p>
       <div class="di2"></div>
       <p>平移</p>
       <div class="di3"></div>

       <p>扭曲</p>
       <div class="di4"></div>

       <p>矩阵</p>
       <div class="di5"></div>
   </body>
</html>

HTML5(动画)