Welcome back to the "Introduction to CSS3" article series, you can check my previous articles here:
In this article, you'll learn about CSS3 transformation effects using CSS3 properties. We can also provide transformation effects using HTML5 canvas properties, you can check my previous article "HTML5 Canvas Advance: Part 2" in which I've used transformation properties in my examples.
What is Transform?
A transform is an effect that allows you to make changes like position, shape and size to an element. We can spin, scale, stretch, turn and move the elements using a CSS3 transform. It can be categorized into two main categories:
- 2D transforms
- 3D transforms
At present, 2D transforms have much more support to previous versions of browsers, whereas 3D transforms only support new browsers.
2D Transforms
There are many 2d transform methods that you'll learn in this article, like:
- rotate
- translate
- skew
- scale
- matrix
Browser Support
![browser.png]()
i) rotate method
In CSS3, the "rotate" method rotates an element clockwise at a defined degree. It also allows negative values to rotate the element anti-clockwise. Before we check our example let's have a look at its syntax:
transform: rotate(value deg);
-webkit-transform: rotate(value deg); /* Safari and Chrome */
-ms-transform: rotate(value deg); /* IE 9 */
Here, we need the vender prefixes for Explorer and Webkit (check here for Vender Prefix detail). Here we have a rotate method in which we need to define a degree and will rotate depending on that element.
Example:
#noCss3 {
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}
#rotate {
transform: rotate(-32deg);
-ms-transform: rotate(-32deg);
-moz-transform: rotate(-32deg);
-webkit-transform: rotate(-32deg);
-o-transform: rotate(-32deg);
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}
Output:
![1.rotate.PNG]()
ii) translate method
In CSS3, the translate method moves the element from its current position by providing the values to the parameter that holds the x-axis (left) and the y-axis (top) positions.
Example:
#noCss3 {
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}
#translate {
transform: translate(60px, 90px);
-ms-transform: translate(60px, 90px);
-moz-transform: translate(60px, 90px);
-webkit-transform: translate(60px, 90px);
-o-transform: translate(60px, 90px);
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}
Output
![2.translate.PNG]()
iii) skew method
In CSS3, the skew method tilts elements that depend on the parameters given to the x-axis (horizontal) and the y-axis (vertical) lines. To tilt the element in the right direction provide a negative value and to tilt in the left direction provide a positive value.
Example:
#noCss3 {
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}
#skew {
transform: skew(35deg, 25deg);
-ms-transform: skew(35deg, 25deg);
-moz-transform: skew(35deg, 25deg);
-webkit-transform: skew(-50deg, 10deg);
-o-transform: skew(35deg, 25deg);
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
opacity:0.7;
}
Output:
![3.skew.PNG]()
iv) scale method
In CSS3, the scale method increases or decreases the element size, it depends on the parameters given by you that includes an x-axis (width) and y-axis (height). Check this example in which we increased the square width 3 times and the height 2 times from its original size using transform.
Example
#noCss3 {
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}
#scale {
margin: 0 100px;
transform: scale(3, 2);
-ms-transform: scale(3, 2);
-moz-transform: scale(3, 2);
-webkit-transform: scale(2, 2);
-o-transform: scale(3, 2);
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
opacity: 0.5;
}
Output
![4.transform.PNG]()
v) matrix method
This is one of the best properties so far, because the matrix method allows you to use all the 2D transform methods in one, it combines them. This method has six parameters that contains some mathematical functions, that allow you to move, scale, skew and rotate elements.
Example
#noCss3 {
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}
#matrix {
margin: 100px 0;
transform: matrix(0.6, 0,4, 0.5, 0.6, 0.3,0.3);
-ms-transform: rotate(-32deg);
-moz-transform: rotate(-32deg);
-webkit-transform: matrix(1.5,1.5,-0.4,2.5,0,0);
border: 3px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
opacity: 0.6;
}
Output
![5.matrix.PNG]()