黑色方块是初始位置,红色是 transform:rotate(45deg) translate(100px, 100px);
绿色是 transform:translate(100px, 100px) rotate(45deg) ;
初始CSS:
<style>
body {
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 50px;
left: 100px;
}
#red {
background: red;
transform: rotate(45deg) translate(100px, 100px);
}
#green {
background: green;
transform: translate(100px, 100px) rotate(45deg);
}
顺序不同,但是到达的位置不一样,我写了一个动画, 黑色方块 =》执行红色方块的动画,发现它走到了绿色方块
#black {
animation: move 10s linear;
}
@keyframes move {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(100px, 100px)
}
100% {
transform: rotate(45deg) translate(100px, 100px);
}
}
结论就是,多属性transform的值,从后往前进行。