CSS3 transform rotate without overriding transform translate

Let’s say I have an element that already has a translate applied to it:

<div class="elem"></div>

.elem { transform: translate(50%,0); }

And now I want to rotate the same element using an additional class. So now the HTML and CSS looks like this:

<div class="elem rotate"></div>

.elem { transform: translate(50%,0); }
.rotate { transform: rotateZ(20deg); }

The problem occurs when the rotation is not added to the existing translate, but rather overrides and negates.

How do I preserve the original translate without having to bloat up my code like this:

.elem { transform: translate(50%,0); }
.rotate { transform: translate(50%,0) rotateZ(20deg); }

Here’s a fiddle:

Thanks guys.

Source: css3

Leave a Reply