CSS transition only one transform function - html

Question

Is there a way to animate only one transform function? For example i only want my transition on scale function. How will i do this
.my-class {
transition: transform;
}
.large {
transform: scale(2) rotate(90deg);
}
<div class="my-class"></div>
<div class="my-class large"></div>

Answer 1

I played around with your code a little and YES you can. Just assign the different transform functions to different classes and use only those classes that you want...like so.
Importantly DO NOT FORGET to use the respective browser supported engines when using animations to make it work. Here is a list of various browsers supporting various animation features.
http://css3.bradshawenterprises.com/support/
.my-class {
transition: transform;
}
.scale_and_rotate {
-webkit-transform: scale(2) rotate(90deg);
-moz-transform: scale(2) rotate(90deg);
-ms-transform: scale(2) rotate(90deg);
-o-transform: scale(2) rotate(90deg);
}
.scale_class {
-webkit-transform: scale(2); // Safari and Chrome(Engine:-Webkit)
-moz-transform: scale(2); // Mozilla(Engine:-Gecko)
-ms-transform: scale(2); // IE(Engine:-Trident)
-o-transform: scale(2); // Opera(Engine:-Presto)
}
.rotate_class {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
and finally you can apply these classes depending on your requirements
<div class="my-class"></div>
<div class="my-class scale_class"></div> // only scale function
<div class="my-class rotate_class"></div> // only rotate function
<div class="my-class scale_and_rotate"></div> // both scale and rotate function
Check the JSFiddle here
If you want to scale and rotate together then the class given by you should work.
And also you can look into CSS #keyframes to achieve this. Here are few good tutorials
https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes
http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/