CSS3：transform多属性顺序
⿊⾊⽅块是初始位置，红⾊是  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;
}
rotate属性
@keyframes move {
0% {
transform: translate(0px, 0px)
}
50% {
transform: translate(100px, 100px)
}
100% {
transform: rotate(45deg) translate(100px, 100px);
}
}
结论就是，多属性transform的值，从后往前进⾏。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。