拥有属性似乎有点反直觉,这些属性本身就是关键：值对,组合在一起.特别是因为它们中的大多数都是完全不同的,只要你知道如何写它,它们仍然可以同时使用.如果我不清楚我在说什么,我的问题是这个.为什么如下：
- 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,你无法改变它.
