CSS3 Tutorial: 2D transform – rotation, translation, scaling, skew

CSS3 Transform

With the transform property we can execute various 2D transformations on DOM elements, such as rotations, scaling, skewing and translations. In Webkit, Firefox and IE10 browsers browsers it is even possible to execute 3D transformations around the x, y and z-axis and also apply perspective.

transform

Syntax: none | <transform-function>+
	/* CSS3 rules for scaling */
	-ms-transform: scale(1.5);
	-o-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
   
   /* CSS3 rules for skewing*/
   	-ms-transform: skew(20deg, 20deg);
	-o-transform: skew(20deg, 20deg);
	-webkit-transform: skew(20deg, 20deg);
	transform: skew(20deg, 20deg);
    
    /* CSS3 rules for rotation */
   	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
    
    /* CSS3 rules for rotation around the x-axis, y-axis en z-axis in webkit-browsers*/
	-webkit-transform: rotateY(45deg);
    -webkit-transform: rotateX(45deg);
    -webkit-transform: rotateZ(45deg);
	transform: rotateX(45deg);
	transform: rotateY(45deg);
	transform: rotateZ(45deg);
    /* CSS3 rules for applying perspective in webkit-browsers*/
	-webkit-perspective: 1000;


	/* CSS3 rules for translation */
  	-moz-transform: translate(50px, -4em); 
	-o-transform: translate(50px, -4em);	
    -ms-transform: translate(50px, -4em); 
	-webkit-transform: translate(50px, -4em);	
    transform: translate(50px, -4em);

Example1: rotations, scaling, skewing and translations on DOM elements.

The HTML code

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Transform </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div class="translator">
<div class="kader1234">
    		<div class="rotation">
    			<p>I am rotated!</p>
    		</div>
</div>
<div class="kader1234">
    		<div class="scaling">
   			  <p>I am scaled!.</p>
    		</div>
</div>
<div class="kader1234">
    		<div class="skewing">
    			<p>I am skewed!</p>
    		</div>
</div>
<div class="kader1234">
<div class="d3">
    			<p>I am rotated around my vertical axis </p>
  </div>
</div>

<div class="kader1234">
    		<div class="translation">
    			<p>I am translated!</p>
    		</div>
</div>

</div>	
</body>
</html>


The CSS

.translator {
  -webkit-perspective: 1000;
  }
div.kader1234{
  height:200px;
  width: 200px;
  float:left;
  margin: 20px;
  background-color: #eee;
}
p {
  color: #fff;
  text-align: center;
  position: relative;
  top: 20%;
  font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: normal; 
}
div.rotation {
	height: 100px;
	width: 100px;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top,  #888,  #575757);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	position: relative;
	left: 50%;
	top: 18%;
	margin-left: -50px;
}
div.scaling {
  height: 100px;
  width: 100px;
  background-color: #64991e;
  background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
  background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  position: relative;
  left: 50%;
  top: 18%;
  margin-left: -50px;
}
div.skewing {
  height: 100px;
  width: 100px;
  background-color: #4488bb;
  background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
  background: -moz-linear-gradient(top,  #00adee,  #0078a5);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
  -moz-transform: skew(20deg, 20deg);
  -ms-transform: skew(20deg, 20deg);
  -o-transform: skew(20deg, 20deg);
  -webkit-transform: skew(20deg, 20deg);
  transform: skew(20deg, 20deg);
  position: relative;
  left: 50%;
  top: 18%;
  margin-left: -50px;
}

div.translation {
  height: 100px;
  width: 100px;
  background-color: #4488bb;
  background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
  background: -moz-linear-gradient(top,  #00adee,  #0078a5);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
  -moz-transform: translate(50px, -4em); 
  -o-transform: translate(50px, -4em);  
  -ms-transform: translate(50px, -4em); 
  -webkit-transform: translate(50px, -4em);  
  transform: translate(50px, -4em);
  position: relative;
  left: 50%;
  top: 18%;
  margin-left: -50px;
}
div.d3 {
  height: 100px;
  width: 100px;
  background-color: #da5867;
  background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
  background: -moz-linear-gradient(top,  #f16c7c,  #bf404f);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
  position: relative;
  left: 50%;
  top: 18%;
  margin-left: -50px;
}
CSS3 Transform
Image 1. CSS3 Transforms.

Check this example in your browser

Leave a comment