How to define different CSS transforms without stomping on each other - html

Question

If one class adds a rotation to an element and another class adds a scale, how do I define those in CSS without them stomping on each other.
<!-- HTML snippet -->
<div class="class1 class2"></div>
/* CSS snippet */
.class1 { transform:rotate(45deg); }
.class2 { transform:scale(0.5); }
In the above example the div would only be scaled because the transform property definition in class2 overrides the one in class one.
How do I get these two different style rules to apply these different transforms?

Answer 1

Unfortunately I believe you will need to do something along the lines of
<div class="class1"><span class="class2"></span></div>

Answer 2

DEMO
CSS
.class1 {
margin-top:100px;
width:100px;
height:30px;
background-color:#000;
transform:rotate(45deg);
} .class2 {
width:100px;
height:30px;
background-color:#00f;
transform:scale(0.5);
}
HTML
<div class="class1"></div>
<div class="class2"></div>
You might have to use 2 divs or once inside span

Answer 3

Try
/* CSS snippet */
.class1 { transform:rotate(45deg); }
.class1.class2 { transform:scale(0.5); }

Answer 4

I tried this and works perfect. i think it just needed to add old browsers pre keywords.
.class1{-moz-transform: rotate(20deg);
-wibkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg)}
.class2{-moz-transform: scale(.5);
-webkit-transform: scale(.5);
-o-transform: scale(.5);
-ms-transform: scale(.5)}