CSS has developed exponentially in a relatively short time. From a language that began with simple style choices, we’ve developed a sophisticated way of laying out content.
CSS3 has tons of amazing features, and one of the key aspects is the ability to modify an element using CSS Transforms.
Browser support
Browser support for transforms is actually fairly extensive; 2D transforms are supported by all major browsers, including IE9 and above; 3D transforms are supported by all modern browsers, including IE10 and above. Even mobile browsers (with the exception of Opera Mini) support transforms.
However, do bear in mind that IE10 doesn’t support the preserve-3d property, which prevents nesting 3D transformed elements.
You will, in places, require the -webkit- and -ms- prefixes, which I’ll talk you through below.
The properties
There is actually plenty you can do with the properties that CSS3 gives you by default, you have a lot to choose from to create your desired effect whether that be in 2D or 3D because you can even combine two or more transform proprieties together to create an even more complicated effect.
I will start with the 2D proprieties we have available:
- matrix(x,x,x,x,x,x,x): Using the matrix you can define a 2d transformation using 6 numbers.
- translate(x,y): In here you can define how you wanna translate (move) an element in 2D space using the x and y coordinates. You can also use the translate property to translate only in the Y or X position using translateY and translateX respectively.
- scale(x,y): Scale needs no introductions , you choose by how much you want to scale up or down the element. This doesn’t have to be proportional. Like the translate you also have the scaleX and scaleY if you wish to only scale in one coordinate.
- rotate(angle): Using the rotate property you can rotate an element by the angle you wish in the 2D world.
- skew(x-angle,y-angle): In here you can define a skew transformation using the x and y angle. Like the scale and translate there is also the option of using one angle by applying the skewX or skewY properties.
As you can see by this list there is plenty to choose from in the 2D world and their usage is quite simple as well, to use the rotate property for example you need:
element {
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
Using these two simple lines you can recreate any of the effects in the list above.
This list was just a part of all the transform available , the 2D part , there are more options that can be used to transform elements but this time this elements will be transformed in the 3D world, the list is:
- matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x): It works just like the 2D matrix but in this particular matrix you use a combination of 16 numbers to achieve the effect.
- translate3d(x,y,z): Using this property you can translate an element using it’s x,y and z values. If you wish to only use the z value you can use the translateZ property.
- scale3D(x,y,z): It works like the 2D scale but it also adds the z value for more flexibility. There is also the option of using the scaleZ to provide a value only for the Z axis.
- rotate3d(x,y,z,angle): It also works in a similar manner of the rotate but in a 3D world. There s also the option to rotateX, rotateY and rotateZ.
- perspective(x): In here you define a perspective view for the element.
As you can see there is also plenty of options when it comes to transformations in the 3D and when it comes to usage they work the same way as the 2D ones , for the scale 3D all you need is:
element {
transform:scale(1.5,1.5,2);
-webkit-transform:scale(1.5,1.5,2);
}
Usage
Now that we have seen what properties are at our disposal and how we can get the basics out of them, it’s time to learn how to create some more interesting effects and most of the time creating these effects means you will have to use more than one property on the same element, to position it the way you want. You can even mix the 2D world with the 3D one, if for example you want to rotate in the 2D world and scale in the 3D in the same element all you would need would be:
element {
transform: rotate(180deg) scale3d(1.5,1.5,2);
-webkit-transform: rotate(180deg) scale3d(1.5,1.5,2);
}
As you can see stacking transforms on top of each other is rather simple, all you need is a space between each property you use and the next one on your list and this means you can use one property or 5 to transform your element it all depends on how complicated you would like the effect to be.
One nice feature that also came with the transforms is that they can be easily used with the CSS Transitions to create some great smooth animations, if you want some element to animate to its transformed version on hover, you just need to do the normal transition syntax alongside the transform one on the hover state, like so:
element {
transition: all 0.5 ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
element:hover {
transform: rotate(360deg) scale3d(1.5,1.5,2);
-webkit-transform: rotate(360deg) scale3d(1.5,1.5,2);
}
If you test this in your browser you will see that it creates an animation for the hover state in pure CSS and all we done was add the transition syntax in the element, there is no need to for anything else, the CSS syntax for the transform is rather simple and also is really simple to be put into an animation and make it work easily on any website.
Conclusion
As you can see CSS transforms have a lot of power and diversification allowing you to create pretty much any animation effect you want on your element and backing that up with the great browser support it can be great alternative for the average person to use.
CSS3 has come up with some great advances that can be very beneficial when it comes to using it for animations instead of using JavaScript or plugins like Flash, I hope you consider testing this animations on your own and using them in your projects down the road.
