5.6 旋转

旋转 transform

--------2d

--------rotate（deg) 平面内旋转

-------translate(横向，纵向）

scale(宽，高）

skew(水平角度，垂直角度）

3d

rotatex(deg)

rotate(deg)

过渡transition:3s 时间 不是hover加是那个容器需要给那个容器加

动画

属性：animation:动画名称, 时长，加上一个无限执行，交替执行

 

 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #first{width:200px; 
   height: 200px;
    background-color: orange;
     margin-lefe:200px;
      margn-top:200px; transition:
       background-position:5s}
      
       #first:hover
       {=======2D========
        transform: rotate(45deg);
       transform:translate(30px,30px);
       transform:scale(2);
       transform: skew(0deg,-30deg);
       transform: skew(30deg,30deg)
      ;========3D=======
       transform:rotateX(180deg);
       transform: rotateY(360deg);
       transform:rotateZ(360deg)}
       #second{width: 300px; height: 300px;
       background: black;
       position:relative;
       animation:mysecond 5s infinite;}
    
       
          @keyframes mysecond{
           0% {background: red;border-radius:90px;box-shadow:-35px 0px 15px gray; left:0px; top:0px ; }}
           25% {background: yellow;border-radius:0px ;left:400px;top:0px}
           50% {background: blue; border-radius: 90px; left:400px;top:300px }
           75%{background:green;border-radius: 0px;box-shadow: 0px 30px 15px gray; left:0px top:300px;}
           100%{background: red;border-radius:20px; left:0px top:0px; }

       
  </style>
 
 </head>
 <body>
 <div id="first">
  今天周末
 </div>
 <div id="second">
  
 </div >
 
 
 </body>
</html>

 

posted @ 2018-05-06 16:55  sun1987  阅读(126)  评论(0)    收藏  举报