CSS3学习笔记

1.Tranform 转换(2D,3D)

2D:

div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}

 

3D:

div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
-moz-transform:rotateX(120deg); /* Firefox */
}

 

2.Transition 过渡

move{
              position: absolute;
              top:10px;
              left:20px;
              transition: top 2s,left 2s,transform 2s;

 } 
.move.to{ 
　　　　　　position: absolute; 
          top:100px; 
　　　　　　left:200px;
　　　　　　transform:rotate(9deg);

}

 

3.Animation 动画

            @keyframes myfirst
            {
                from {top:10px;left:20px;}
                to {top:200px;left:100;}
            }
            @-moz-keyframes myfirst
            {
                from {top:10px;left:20px;}
                to {top:200px;left:100;}
            }
            @-webkit-keyframes myfirst
            {
                from {top:10px;left:20px;}
                to {top:200px;left:100;}
            }
            @-o-keyframes myfirst
            {
                from {top:10px;left:20px;}
                to {top:200px;left:100;}
            }

         .move{
              position: absolute;
              top:10px;
              left:20px;
 
          }

          .move.to{
              position: absolute;
              top:100px;
              left:200px;
              animation:myfirst 5s;
              -moz-animation:myfirst 5s;  /*Firefox */
            -webkit-animation:myfirst 5s;  /*Safari and Chrome */
            -o-animation:myfirst 5s;  /*Opera */
          }