transform 多值先后执行顺序

 

一、用例

 

1.先平移后旋转

.box{
    width: 200px;
    height: 200px;
    background: red;
    animation: move 3s forwards;
}
@keyframes move{
    0%{
        transform: translateX(0)  rotate(0) ;
    }
    100%{
        transform: translateX(200px) rotate(90deg) ;   
    }
}

<div class="box">1231212212</div>

 

效果图：

1231212212

 

 

 2.先旋转后平移

因为rotate旋转的时候会旋转坐标轴，之后再进行translate会依据新的坐标轴。所以会导致向下平移了200px

.box{
    width: 200px;
    height: 200px;
    background: red;
    animation: move 3s forwards;
}
@keyframes move{
    0%{
        transform: translateX(0)  rotate(0) ;
    }
    100%{
        transform: rotate(90deg)  translateX(200px);    
    }
}

    <div class="box">aaaaaaaaa</div>

效果图：

aaaaaaaaa

 

 

 

 

 

 

 

 

二、总结

transform: rotate(angle) translate(length | percentage)之间的关系。translate的百分比取值基准元素自身的宽(x)和高(y)来确定移动的距离。

1.浏览器的解析过程，从上到下 从左到右

2.rotate()旋转的时候会旋转坐标轴

3.注意：一般建议将旋转放在最后。