+ 2

🌟Multiple transforms for single element🌟

How can we apply multiple transform on the single element without disturbing its original configuration . Suppose we have one division element and we have a CSS. div { width:200px; height:200px; background-color:#43f8c9; transform:skew(0,20deg); transform: rotateZ(90deg); } The problem with this is that when the code runs , it just applies rotateZ(90deg); instead of both. Is there any way apply them both or multiple at a single time . Plz answer if you know the answer . Thanks in advanced .

4th Dec 2017, 10:45 AM
RZK 022
RZK 022 - avatar
4 Answers
+ 3
Same selector in CSS would overwrite the preceding one, combine it. transform: skew(0,20deg) rotateZ(90deg);
4th Dec 2017, 12:25 PM
CalviŐ˛
CalviŐ˛ - avatar
+ 3
thanks for the help , I was thinking to use the same selector earlier but I was separating it by comas.
5th Dec 2017, 2:57 AM
RZK 022
RZK 022 - avatar
+ 2
But keep in mind that transformations are executed from right to left in this case. Here is my illustration: https://code.sololearn.com/WAF8G76utd95/?ref=app
13th Jan 2019, 1:18 PM
Riri the Coder
Riri the Coder - avatar
0
Hi
26th Jan 2019, 12:02 PM
KEVDIYA HEMINKUMAR
KEVDIYA HEMINKUMAR - avatar