Compass has a mixin for defining any CSS Level 3 transform.
The Compass 2D transform mixins follow exactly the same syntax as the W3C 2D Transform Functions (http://www.w3.org/TR/css3-transforms/#two-d-transform-functions).
Therefore, if we wanted to scale we could write this:
@include scale(2,2); // Make it twice original size
If we wanted to translate (translate moves an element in 2D space) we could write this:
@include translateX(20px); // Move it 20px right
For the odd occasions when you want to add multiple transforms to a single element, use the simple-transform
mixin. Here's an example:
@include simple-transform(1.05,3deg);
That would scale the image by 1.05
and also rotate it by 3
degrees. The arguments must be passed in this order: scale
, rotate
, translate-x
, translate-y
, skew-x
, skew-y
, origin-x
, origin-y
. However, just remember this is only really useful for combining multiple transforms. Ordinarily, for a single transform, just use the standard transform mixins already...