These can be the transformation of a shape, position or element size.
There are four available functions: skew, rotate, translate and scale:
/* Skew */
.skew {
transform: skew(-15deg);
}
/* Rotate */
.rotate {
transform: rotate(-15deg);
}
/* Translate */
.translate {
transform: translate(0, 50%);
}
/* Scale */
.scale {
transform: scale(1.5);
}Try it at cdpn.io/e/wxoil.
All four functions transform an element around a designated axis. For example,
skewX(), skewY().
Combination of Transformations
Remember that combinations of transformations are not separated by a comma:
transform:
scale(1.5) skew(-15deg);Transformation Origin
This sets the point of origin of a transformation. By default, the origin is in
the center of an element: transform-origin: center center. If we set the
origin in the top left corner, it will cause the element to scale from that
point:
.scale-2 {
transform: scale(1.5);
transform-origin: top left;
}See more at cdpn.io/e/brBgk
Browser Support
IE10+. For older browsers, you will probably need to use feature detection using Modernizr and then come up with an alternative solution. Basic 2D transformations can be carried out in older Internet Explorers using a proprietary filter function. Also, there is a smart converter for CSS3 to filter conversion.