在多個地方設置CSS變換

有多種方式可以在多個地方設置樣式transform: translateX(100px) translateY(200px) rotate(100deg) scale(1.5)？例如，有這些行CSS：在多個地方設置CSS變換

.translate-x { 
    transform: translateX(100px); 
} 

.translate-y { 
    transform: translateY(200px); 
} 

.rotate { 
    transform: rotate(100deg) 
} 

.big { 
    transform: scale(1.5); 
}

然後，我想使用這些類的HTML結合transform。

<div class="translate-x rotate big"></div> 
<div class="translate-y big"></div> 
...

問題是風格不合並，但最後一個會覆蓋其他風格。

只有我所知道的是結合所有類。但有很多組合...

.translate-x.translate-y { 
    transform: translateX(100px) translateY(200px); 
} 

.translate-x.translate.y.big { 
    transform: translateX(100px) translateY(200px) scale(1.5); 
} 

...

來源

2017-05-23 Vesmy

與此類似 - https://stackoverflow.com/q/10765755/483779 – Stickers

不幸的是，你不能這樣做。語法transform如下所示，

transform: none|transform-functions|initial|inherit;

所以，當你打電話給你的HTML元素的多個類，只有在CSS中聲明的最後class應用。（class訂單在HTML中無關緊要）

您可以做的最好的做法是使用CSS預處理器，該函數將生成一個聲明中調用的這些轉換函數的字符串，以便它們不會覆蓋。

來源

2017-05-23 16:12:10

正如上面所說的回答說，目前這是不可能的，通過孤獨的CSS。你需要使用JavaScript來爲你應用它。

這裏是一個小的jQuery例子

$('.my-element').css({ 
'transform': 'translateX(100px) translateY(200px) rotate(100deg) scale(1.5)' 
});

香草JS方法如下：

var myElement = document.getElementsByClassName('my-element'); 
myElement.style.transform = 'translateX(100px) translateY(200px) rotate(100deg) scale(1.5)';

您應該能夠使用下列3種方法適用之一：

事件監聽器（最好帶事件代表團）
有趣ctions
只需將腳本包含在主體底部，以便元素在轉換之前進行渲染以防止出現毛刺。

來源

2017-09-30 07:24:20 Callat

在多個地方設置CSS變換

回答

相關問題