拥有属性似乎有点反直觉,这些属性本身就是关键：值对,组合在一起.特别是因为它们中的大多数都是完全不同的,只要你知道如何写它,它们仍然可以同时使用.如果我不清楚我在说什么,我的问题是这个.为什么如下：
transform: rotate(40deg) scaleX(1,5) translate(-10px,20px);
不是这样写的：
rotation: 40deg; scaleX: 1.5; translate: -10px 20px;
解决方法
那是因为变换不是可交换的.因此,订单很重要.
例如,如果在旋转后使用平移,则平移方向也将旋转.
.first::after {
transform: rotate(180deg) translateX(50px);
}
.second::after {
transform: translateX(50px) rotate(180deg);
}
body {
display: flex;
flex-direction: space-around;
}
div {
height: 100px;
width: 100px;
border: 5px solid;
margin: 25px auto;
}
div::after {
content: 'Hello';
display: block;
height: 100%;
width: 100%;
background: yellow;
opacity: .5;
}
.first::after {
transform: rotate(180deg) translateX(50px);
}
.second::after {
transform: translateX(50px) rotate(180deg);
}
<div class="first"></div> <div class="second"></div>
使用不同的CSS属性,您无法选择所需的顺序.这是0700的限制BoltClock mentioned,规格defines an order,你无法改变它.
