关于css3中transform的理解（只是改变状态未改变其真正的属性）

众所周知，在css3中可以用animation实现动画效果，在这里用一个transform:translateX举例。

<div class="div1"></div>

.div1{
        margin:0 auto;
        width: 100px;
        height: 100px;
        border:1px solid blue;
        -webkit-animation-name: move;
        -o-animation-name: move;
        animation-name: move;
        -webkit-animation-duration: 1s;
        -o-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-iteration-count: 1;
        -o-animation-iteration-count: 1;
        animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards; 
    }
@keyframes move{
        0%{}
        50%{
            transform:translateX(-100px);
        }
        100%{
            transform:translateX(100px);
        }
    }

这段代码运行的结果将会是向左移动100px，然后再从初始状态的基础上向右移动100px。注意这里设置了animation-fill-mode: forwards，所以并不会再回到初始状态。

这段代码可以说明，其transform变形操作，是在基本属性的基础上进行变形操作，并不会改变其初始状态属性的设置。这也给我们一个启示，假如我们设置一个按钮点击之后，让某个div向右平移100px,并设置animation-fill-mode: forwards定格其最后状态。当我们再次点击按钮的时候需要设置div的位置，以left为例的话，就需要先设置left:100px,然后再设置向左平移100px，这时才能达到我们想要的效果。

但是div中的包一个div的情况又有所不同，例如：

 <div class="div1">
          <div class="div2"></div>
     </div>
     

 

.div1{
        margin:0 auto;
        width: 100px;
        height: 100px;
        border:1px solid blue;
        -webkit-animation-name: move;
        -o-animation-name: move;
        animation-name: move;
        -webkit-animation-duration: 1s;
        -o-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-iteration-count: 1;
        -o-animation-iteration-count: 1;
        animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards;  
    }
    .div2{
         width: 50px;
         height: 50px;
         border:1px solid yellow;
         -webkit-animation-name: move1;
        -o-animation-name: move1;
        animation-name: move1;
        -webkit-animation-duration: 1s;
        -o-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-iteration-count: 1;
        -o-animation-iteration-count: 1;
        animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;
                -o-animation-fill-mode: forwards;
                animation-fill-mode: forwards; 
    }
    @keyframes move{
        form{}
        to{
            transform:translateX(-100px);
        }
    } 
    @keyframes move1{
        0%{}
        100%{
            transform:translateX(100px);
        }
    }

这时，我们将会发现，子元素div2会停留在原来的位置不会发生任何改变，这时因为子元素div2本身也是div1的一部分，如果去除掉div2的动画效果，div1和div2将同时向右移动100px,注意这里不要考虑不改变属性值，div2将会在原来属性的基础上，向左移动100px。因为两者都有动画且都是在进行中的，div2是既有div1的动画又有div2的动画，所以最终呈现的效果就是在原来的为位置不发生改变。这时要想达到我们想要得效果的话，就需要吧div2的translateX设置为-200px。