使用css变量,我知道您可以设置它们:
--transform: translateX(30px);
transform: var(--transform, translateY(100%));
// ^ usage ^ fallback value if none specified
使用转换,可以链接方法,也可以使用复杂变量:
--transform: translateX(30px) rotate(-12deg);
transform: var(--transform) translateX(10px) rotate(15deg) scale(1.5);
有没有一种方法可以忽略--transform
(但仍然遵循它之前和之后的所有其他说明)?我试过了:
--transform: none
--transform: ""
但显然,它们使宣言无效.
body{
display: flex;
gap: 100px;
}
.block{
--turn-amount: rotate(45deg) rotate(13deg);
--scale-amount: 3;
aspect-ratio: 1/1;
width: 100px;
background: blue;
transform: var(--turn-amount) scale(var(--scale-amount));
}
.block-1{
--turn-amount: 0
}
<div class="block block-1">Grow and turn</div>
<div class="block block-2">Just grow</div>
我想写一些类似的东西:
.block-1{
--turn-amount: null;
}
但目前,我想出的最好办法就是宣布一个"无意义"的转换,即
.block-1{
--turn-amount: scale(1);
}