Post
Ask Question

Part 4: Introduction to CSS3 - 2d Transform

Introduction

 
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 the 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:
  1. transform: rotate(value deg);  
  2. -webkit-transform: rotate(value deg); /* Safari and Chrome */  
  3. -ms-transform: rotate(value deg); /* IE 9 */ 
Here, we need the vendor prefixes for Explorer and Webkit (check here for Vendor Prefix detail). Here we have a rotate method in which we need to define a degree and will rotate depending on that element.
 
Example:
  1. #noCss3 {  
  2.     border: 2px solid green;  
  3.     background: #b6ff00;  
  4.     width: 150px;  
  5.     height: 75px;  
  6. }  
  7.    
  8. #rotate {  
  9.     transform: rotate(-32deg);  
  10.     -ms-transform: rotate(-32deg);  
  11.     -moz-transform: rotate(-32deg);  
  12.     -webkit-transform: rotate(-32deg);  
  13.     -o-transform: rotate(-32deg);  
  14.     border: 2px solid green;  
  15.     background: #b6ff00;  
  16.     width: 150px;  
  17.     height: 75px;  
  18. }  
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
  1. #noCss3 {  
  2.     border: 2px solid green;  
  3.     background: #b6ff00;  
  4.     width: 150px;  
  5.     height: 75px;  
  6. }  
  7.    
  8. #translate {  
  9.     transform: translate(60px, 90px);  
  10.     -ms-transform: translate(60px, 90px);  
  11.     -moz-transform: translate(60px, 90px);  
  12.     -webkit-transform: translate(60px, 90px);  
  13.     -o-transform: translate(60px, 90px);  
  14.     border: 2px solid green;  
  15.     background: #b6ff00;  
  16.     width: 150px;  
  17.     height: 75px;  
  18. } 
Output
 
2.translate.PNG
 

iii) skew method

 
In CSS3, the skew method tilts elements that depend on the parameters are 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 positive value.
 
Example:
  1. #noCss3 {  
  2.     border: 2px solid green;  
  3.     background: #b6ff00;  
  4.     width: 150px;  
  5.     height: 75px;  
  6. }  
  7.    
  8. #skew {  
  9.     transform: skew(35deg, 25deg);  
  10.     -ms-transform: skew(35deg, 25deg);  
  11.     -moz-transform: skew(35deg, 25deg);  
  12.     -webkit-transform: skew(-50deg, 10deg);  
  13.     -o-transform: skew(35deg, 25deg);  
  14.     border: 2px solid green;  
  15.     background: #b6ff00;  
  16.     width: 150px;  
  17.     height: 75px;  
  18.     opacity:0.7;  
  19. } 
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 include 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
  1. #noCss3 {  
  2.     border: 2px solid green;  
  3.     background: #b6ff00;  
  4.     width: 150px;  
  5.     height: 75px;  
  6. }  
  7.    
  8. #scale {  
  9.     margin: 0 100px;  
  10.     transform: scale(3, 2);  
  11.     -ms-transform: scale(3, 2);  
  12.     -moz-transform: scale(3, 2);  
  13.     -webkit-transform: scale(2, 2);  
  14.     -o-transform: scale(3, 2);  
  15.     border: 2px solid green;  
  16.     background: #b6ff00;  
  17.     width: 150px;  
  18.     height: 75px;  
  19.     opacity: 0.5;  
  20. } 
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 contain some mathematical functions, that allow you to move, scale, skew and rotate elements.
 
Example
  1. #noCss3 {  
  2.     border: 2px solid green;  
  3.     background: #b6ff00;  
  4.     width: 150px;  
  5.     height: 75px;  
  6. }  
  7.    
  8. #matrix {  
  9.     margin: 100px 0;  
  10.     transform: matrix(0.6, 0,4, 0.5, 0.6, 0.3,0.3);  
  11.     -ms-transform: rotate(-32deg);  
  12.     -moz-transform: rotate(-32deg);  
  13.     -webkit-transform: matrix(1.5,1.5,-0.4,2.5,0,0);            
  14.     border: 3px solid green;  
  15.     background: #b6ff00;  
  16.     width: 150px;  
  17.     height: 75px;  
  18.     opacity: 0.6;  
  19. } 
Output
 
5.matrix.PNG
 


Similar Articles