2d/3d转换

标签：

transform

translate 移动 translate(10px,100px)要配合过渡或动画才有意义

transition-delay()过渡延迟时间

transition-timing-function:线性过度

transition-property:all;元素参与的属性,all表示全部

rotate 顺时针旋转 负数是逆时针 rotate(45deg)
scale 放大缩小  transform: scale(1,1); x轴 y轴 放大缩小比例

matrix()[组合操作]六个参数一起操作

 .div:hover{

       transform:  skew(30deg 30deg);

       transition-property: all;

       transition-duration: 3s;

       transition-timing-function: linear;

   }

anmation

动画 它的属性有：

 animation-name  动画名

 animation-duration 动画时间

 animation-timing-function 方式（linear匀速 ease加速再减速 ease-in加速 ease-out减速 ease-in-out低速开始和结束 ）

 animation-delay  动画开始前延迟时间

 animation-iteration-count  动画次数

 animation-direction  是否反向

@-浏览器-keyframes 名称{

        from{}to{}

}



  .div{

            height: 100px;

            width: 100px;

            background: red;

           margin-left: 200px;

           margin-top: 200px;

           float: left;

           position:relative;

        }

        div{

            animation:aa 2s infinite;

        }

   @keyframes aa

   {

       from {left:0px;}

       to {left:200px;}

   }





<div class="div">11</div>



 div{

            width: 100px ;

            height: 100px;

            background: red;

            /*position:relative;*/

            animation: aa 2s linear infinite;

        }

        @keyframes  aa {

         0%{

             transform: translate(0 0);

         }

          100%{

        transform:tr

2d/3d转换

标签：

原文地址：http://www.cnblogs.com/yangjinfeng172/p/4771441.html