CSS Transforms
CSS has become more and more powerful over the past few years and CSS transforms are a prime example. CSS transforms allow for sophisticated, powerful transformations of HTML elements. One or more transformations can be applied to a given element and transforms can even be animated using CSS animations.
Transform Types
There are several types of CSS transforms, each performing a different function. The following are the transform types with example value:
transform: nonetransform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)transform: rotate(0.5turn)transform: rotateX(3deg)transform: rotateY(3deg)transform: rotateZ(3deg)transform: rotate3d(1, 2.0, 3.0, 3deg)transform: scale(3, 3.5)transform: scaleX(3)transform: scaleY(0.6)transform: scaleZ(0.9)transform: scale3d(2.5, 1.2, 0.3)transform: skewX(44deg)transform: skewY(1.9rad)transform: translate(12px, 20%)transform: translateX(5em)transform: translateY(9in)transform: translateZ(4px)transform: translate3d(40px, 20%, 5em)transform: perspective(40px)
All text, imagery, background imagery, and other elements will be transformed accordingly.
Multiple Transforms
Applying multiple transforms to an element is simple:
.myTransformElement {
transform: scale(2) skewY(0.3) rotate(4deg);
}
Separate multiple transforms using spaces!
Sibling Property: transform-origin
Transforms have a sibling property of transform-origin. The transform-origin property provides a point of origin for the given transform to take place:
.myTransformElement {
transform: scale(2) skewY(0.3) rotate(4deg);
transform-origin: 0 0;
transform-origin: 50% 50%;
transform-origin: -5em 3em;
}
As you can see above, there are several formats of transform-origin to choose from.
Animating Transforms
Animating CSS transforms is just as easy as animating any other CSS property:
.container {
transform: rotateY(2deg);
transition: 0.6s;
transition-property: transform;
}
.container:hover {
transform: rotateY(180deg);
}
@keyframe animations can also be used to animate CSS transforms.
CSS Transform Examples
