学习css3新特性，简单有用的案例2

1.transform 变形

• rotate(30deg) 顺时针旋转30度【是负数的话就是逆时针旋转】
• rotate3d(x,y,z,30deg) 3d旋转
• rotateX(30deg) 沿着x轴的进行30度的旋转
• rotateY(30deg) 沿着y轴的进行30度的旋转
• rotateZ(30deg) 沿着z轴的进行30度的旋转

• translate(100px,50px) x轴平移100px,y轴平移50px。【当只有一个值的时 候，y轴的值为0. 负数就是反方向移动 】
• translate3d(100px,50px,20px) 3d转换
• translateX(100px) x轴平移100px
• translateY(100px) y轴平移100px
• translateZ(100px) z轴平移100px

• scale(2,1.2) 大于1就是放大，小于1就是缩小。【如果只有一个值，就是缩放同样倍数大小】
• scale3d(2,1.2,1.5) 3d缩放
• scaleX(1.2) x轴(水平方向)缩放元素
• scaleY(1.5) y轴(垂直方向)缩放元素
• scaleZ(1.5) z轴缩放元素

skew(30deg,10deg) X轴和Y轴同时按一定的角度值进行扭曲变形【如果只有一个值，就是y轴上不扭曲变形】
skewX(15deg)X轴扭曲变形
skewY(20deg)Y轴扭曲变形

    
    



    .p{

    }
.div,.div1,.div2,.div3{   
width: 200px;
height: 150px;
     }
     .div{ background: yellow;}
     .div:hover{
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);

     }
      .div1{ background: green;}
     .div1:hover{
-webkit-transform: translate(100px,50px);
-moz-transform: translate(100px,50px);
-ms-transform: translate(100px,50px);
-o-transform: translate(100px,50px);
transform: translate(100px,50px);
     }
      .div2{ background: red;}
     .div2:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
     }
      .div3{ background: blue;}
     .div3:hover{
-webkit-transform: skew(10deg);
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-o-transform: skew(10deg);
transform: skew(10deg);
     }

1. transition 动画属性
   ease 逐渐变慢 默认值
   linear 匀速
   ease-in 加速
   ease-out 减速
   ease-in-out 加速在减速

transition([需要改变元素的什么属性] [执行时间] [什么动画来完成] [延迟触发时间(可选)])
执行时间必填，不然没有效果

    
    



.div4{   
width: 200px;
height: 150px;
     }
     .div4{ background:#ff0;
 -webkit-transition: background-color 1s linear;
 -moz-transition: background-color 1s linear;
 -o-transition: background-color 1s linear;
 transition: background-color 1s linear;
    }
     .div4:hover{
     background-color: #0ff; 
}

transition改变多个属性值只需在后面加个逗号

    
    



.div4{   
width: 200px;
height: 150px;
     }
     .div4{ background:#ff0;
 -webkit-transition: background-color 1s linear ,width 1s ease-in-out .5s;
 -moz-transition: background-color 1s linear ,width 1s ease-in-out .5s;
 -o-transition: background-color 1s linear ,width 1s ease-in-out .5s;
 transition: background-color 1s linear ,width 1s ease-in-out .5s;
 
    }
     .div4:hover{
     background-color: #0ff; 
     width:150px;
}

animations 动画

• animations动画需要@keyframes关键帧
• 语法 animation:绑定到选择器的 keyframe 名称（必填） | 动画所花的时间（必填）|动画形式 | 延迟时间 | 播放次数 | 是否轮流反向播放动画
  animation: name duration timing-function delay iteration-count
  direction;

  
  


  
    .div{width: 100px;height: 100px;background: #ff0;
      position: relative;  
      -webkit-animation: mymove 5s ease-in;
     -o-animation: mymove 5s ease-in;
      animation: mymove 5s ease-in;
    }
    @keyframes mymove{
 0%{top:0px;}
 25%{top:200px;}
 50%{top:20px;}
 100%{top:100px;}
    }
   @-webkit-keyframes mymove{
 0%{top:0px;}
 25%{top:200px;}
 50%{top:20px;}
 100%{top:100px;}
    }