When I first encountered CSS3 transform property, I had a nostalgic moment that took me back to the days that I was a computer science student. Back then, one of the mathematics courses that I had to take was linear algebra. Linear algebra deals with vector spaces and linear functions that make transformations using vectors and matrixes. The course itself wasn’t so hard but later on, when I started to work as a Web developer, I always thought to myself where can I use those pesky vectors and matrixes in a Web site or application without any plugins. Now with CSS3 transform, I got the answer.
CSS3 Transform
Using the new CSS3 transform property, you can create element transformations to change the shape, size and position of the element. The transform property can get a set of transformation functions which can be composed if you write them separated by whitespace.
The 2D transform functions included:
translate – Given left and top parameters, the element will move from its position to the new point. There are also translateX and translateY functions that get only one parameter and translate the element only in one axis. rotate – Given a degree the element rotate clockwise according to the degree. Pay attention that the parameter should be in a specific format for example these are valid parameters: 60deg, 80deg and etc. scale – Given a width and height, the element will increase or decrease its size. There are also scaleX and scaleY functions that get only one parameter and scale the element only in one axis. skew – Given x degree and y degree parameters, the element will turn in the given angles first in the x-axis and then in the y-axis. There are also skewX and skewY functions that get only one parameter and skew the element only in one axis. matrix – Given six a-f parameters apply the transformation matrix [a b c d e f] on the element.
The 3D transform functions included:
matrix3d – The same as the matrix function but now gets 16 parameters. translate3d – Gets an additional z-axis parameter. scale3d – Gets an additional z-axis parameter. There is also scaleZ function that scales the element only in the z-axis. rotate3d – Gets four parameters – x, y and z that define the [x y z] direction vector and a degree to rotate in that direction. There is also a rotateZ function that rotate the element in the z-axis.
A Simple Transform Example
Using the transform property is simple as to set every other CSS property on an element. Here is a simple example of how to use the transform property:
<!DOCTYPE html>
<html>
<head>
<title>Transformation Example</title>
<style type="text/css">
#rotatedTriangle
{
position:absolute;
left: 100px;
top:100px;
height: 100px;
width: 100px;
background-color: Green;
transform: rotate(45deg) scale(2, 2);
}
</style>
</head>
<body>
<div id="rotatedTriangle"></div>
</body>
</html>
Pay attention – I use the specification CSS properties. In every major browser up until the specification becomes recommendation, you will have to use the browser prefix.
Here is a picture of the outcome of the transformation in the Web page:
Combining CSS3 Transform and CSS3 Animations
In a previous post, I wrote about CSS3 animations and how to use it to create simple animations. You can combine the knowledge of CSS3 animations with CSS3 transform in order to create sophisticated animations embedded in your Web pages. Let's see a simple example:
<!DOCTYPE html>
<html>
<head>
<title>Transformation and Animation</title>
<style type="text/css">
@keyframes trans
{
from { transform: translate(0px, 0px) scale(1, 1); }
to { transform: translate(300px, 300px) scale(2, 2); }
}
#animatedDiv
{
position:absolute;
left: 100px;
top:100px;
height: 100px;
width: 100px;
background-color: Green;
animation: trans 5s linear 1s infinite;
}
</style>
</head>
<body>
<div id="animatedDiv"></div>
</body>
</html>
In the example, I use the @keyframes rule to apply the translate and scale function on a div element embedded in the Web page. The animation will translate the div 300px in the x-axis and y-axis and then it will scale the div twice its size. This is a simple example but it shows the concept of using two CSS3 modules to get a very interesting outcome.
Pay attention – I use the specification CSS properties. In every major browser up until the specification becomes recommendation, you will have to use the browser prefix.
Summary
CSS3 transform helps to create element transformations in 2D and 3D. Using this new CSS3 module can help to create graphics and of course animations which could be achieved in the past only with plugins or with a lot of JavaScript code. Not all the browsers support the transform property but you can use fallbacks in order to implement it even today.
Gil Fink is a web development expert and ASP.Net/IIS Microsoft MVP. He is the founder and owner of sparXys. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also co-author of several Microsoft Official Courses (MOCs) and training kits, co-author of "Pro Single Page Application Development" book (Apress) and the founder of Front-End.IL Meetup. You can read his publications at his website: http://www.gilfink.net
Submit an article or tip
