CSS transform

CSS transform property translates, rotates, scales, or skews the box in a coordinate system.

1. transform (along 3-axes)

Preview Example

Example

<style>
	.rotationalCon{
	perspective:300px;
	-webkit-perspective:300px;
	width:150px;
	height:150px;
	margin:2%;
	background-color:rgb(210,210,210);
	}
	.transformBoxX{
	transform:rotateX(45deg);
	-webkit-transform:rotateX(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;
	}
	.transformBoxY{
	transform:rotateY(45deg);
	-webkit-transform:rotateY(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.transformBoxZ{
	transform:rotateZ(45deg);
	-webkit-transform:rotateZ(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.persXYZ{
	perspective:300px; -webkit-perspective:300px;
 	width:150px;
 	height:150px;
 	background-color:rgb(210,210,210);	
	}
	.commonXYZ{
	 width:150px;
 	height:150px;
 	background-color:lightskyblue; 
 	color:white;
	}

	</style>

<div style="width:100%; height:auto; float:left; clear:both;">
<div style="width:230px; float:left; margin:10px;">
  <div class="rotationalCon">
   <div class="transformBoxX">
   web4college
   </div>
  </div>
  <p>transform:rotatex(<span id="writeX">45</span>deg); </p>
  <p><input type="range" min="0" max="360" id="rotateXs" onchange="rotationxUpdate();"></p>
</div>  
<div style="width:230px; float:left; margin:10px;">  
  <div class="rotationalCon">
   <div class="transformBoxY">
   web4college
   </div>
  </div>  
  <p>transform:rotatey(<span id="writeY">45</span>deg); </p>
  <p><input type="range" min="0" max="360" id="rotateYs" onchange="rotationyUpdate();"></p>
</div>  
<div style="width:230px; float:left; margin:10px;">
  <div class="rotationalCon">
   <div class="transformBoxZ">
   web4college
   </div>
  </div>
  <p>transform:rotatez(<span id="writeZ">45</span>deg); </p>
  <p><input type="range" min="0" max="360" id="rotateZs" onchange="rotationzUpdate();"></p>
</div>  
</div>
<br>

<script>



writeXValue = document.getElementById("writeX");
writeYValue = document.getElementById("writeY");
writeZValue = document.getElementById("writeZ");

setXValue = document.getElementsByClassName("transformBoxX");
setYValue = document.getElementsByClassName("transformBoxY");
setZValue = document.getElementsByClassName("transformBoxZ");

function rotationxUpdate(){
	setInterval(rotationx,1);
}

function rotationyUpdate(){
	setInterval(rotationy,1);
}

function rotationzUpdate(){
	setInterval(rotationz,1);
}
function rotationx(){
	getXValue = document.getElementById("rotateXs").value;
	setXValue[0].style.transform = "rotateX("+getXValue+"deg)";
	setXValue[0].style.webkitTransform = "rotateX("+getXValue+"deg)";
	writeXValue.innerHTML = getXValue;
}

function rotationy(){
	getYValue = document.getElementById("rotateYs").value;
	setYValue[0].style.webkitTransform = "rotateY("+getYValue+"deg)";
	setYValue[0].style.transform = "rotateY("+getYValue+"deg)";
	writeYValue.innerHTML = getYValue;
}
function rotationz(){
	getZValue = document.getElementById("rotateZs").value;
	setZValue[0].style.transform = "rotateZ("+getZValue+"deg)";
	setZValue[0].style.webkitTransform = "rotateZ("+getZValue+"deg)";
	writeZValue.innerHTML = getZValue;
}


</script>

The following are the following values of transform property.

rotate values

It can rotate the element along X, Y or Z axis. The value in the parentheses represents the value of angle.

For example, rotateX(45deg) means element should rotate 45 degree around X-axis.

rotateX()

rotateX() value rotates the element around x-axis.

Preview Example

Try it

Example

Try it

<style>
	.rotationalCon{
	perspective:300px;
	-webkit-perspective:300px;
	width:150px;
	height:150px;
	margin:2%;
	background-color:rgb(210,210,210);
	}
	.transformBoxX{
	transform:rotateX(45deg);
	-webkit-transform:rotateX(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;
	}
	.transformBoxY{
	transform:rotateY(45deg);
	-webkit-transform:rotateY(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.transformBoxZ{
	transform:rotateZ(45deg);
	-webkit-transform:rotateZ(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.persXYZ{
	perspective:300px; -webkit-perspective:300px;
 	width:150px;
 	height:150px;
 	background-color:rgb(210,210,210);	
	}
	.commonXYZ{
	 width:150px;
 	height:150px;
 	background-color:lightskyblue; 
 	color:white;
	}

	</style>
<div style="width:100%; height:auto; float:left; clear:both;">
 <div style="width:210px; float:left; margin-left:2%;">
  <div class="persXYZ">
   <div style="transform:rotateX(0deg); -webkit-transform:rotateX(0deg);" class="commonXYZ">

   </div>
  </div>
  <p>transform:rotateX(0deg);</p>
 </div>
  <div style="width:210px; float:left; margin-left:2%; ">
  <div class="persXYZ">
   <div style="transform:rotateX(45deg); -webkit-transform:rotateX(45deg);" class="commonXYZ">

   </div>
  </div>
  <p>transform:rotateX(45deg);</p>
 </div>
</div>
<script>



writeXValue = document.getElementById("writeX");
writeYValue = document.getElementById("writeY");
writeZValue = document.getElementById("writeZ");

setXValue = document.getElementsByClassName("transformBoxX");
setYValue = document.getElementsByClassName("transformBoxY");
setZValue = document.getElementsByClassName("transformBoxZ");

function rotationxUpdate(){
	setInterval(rotationx,1);
}

function rotationyUpdate(){
	setInterval(rotationy,1);
}

function rotationzUpdate(){
	setInterval(rotationz,1);
}
function rotationx(){
	getXValue = document.getElementById("rotateXs").value;
	setXValue[0].style.transform = "rotateX("+getXValue+"deg)";
	setXValue[0].style.webkitTransform = "rotateX("+getXValue+"deg)";
	writeXValue.innerHTML = getXValue;
}

function rotationy(){
	getYValue = document.getElementById("rotateYs").value;
	setYValue[0].style.webkitTransform = "rotateY("+getYValue+"deg)";
	setYValue[0].style.transform = "rotateY("+getYValue+"deg)";
	writeYValue.innerHTML = getYValue;
}
function rotationz(){
	getZValue = document.getElementById("rotateZs").value;
	setZValue[0].style.transform = "rotateZ("+getZValue+"deg)";
	setZValue[0].style.webkitTransform = "rotateZ("+getZValue+"deg)";
	writeZValue.innerHTML = getZValue;
}


</script>

Perspective property makes the projection of the box after rotating. The 3d tranformation is possible due to perspective property.

rotateY()

rotateY() rotates the element around y-axis.

Preview Example

Try it

Example

Try it

<style>
	.rotationalCon{
	perspective:300px;
	-webkit-perspective:300px;
	width:150px;
	height:150px;
	margin:2%;
	background-color:rgb(210,210,210);
	}
	.transformBoxX{
	transform:rotateX(45deg);
	-webkit-transform:rotateX(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;
	}
	.transformBoxY{
	transform:rotateY(45deg);
	-webkit-transform:rotateY(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.transformBoxZ{
	transform:rotateZ(45deg);
	-webkit-transform:rotateZ(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.persXYZ{
	perspective:300px; -webkit-perspective:300px;
 	width:150px;
 	height:150px;
 	background-color:rgb(210,210,210);	
	}
	.commonXYZ{
	 width:150px;
 	height:150px;
 	background-color:lightskyblue; 
 	color:white;
	}

	</style>

<div style="width:100%; height:auto; float:left; clear:both;">
 <div style="width:210px; float:left; margin-left:2%;">
  <div class="persXYZ">
   <div style="transform:rotateY(0deg); -webkit-transform:rotateY(0deg);" class="commonXYZ">

   </div>
  </div>
  <p>transform:rotateY(0deg);</p>
 </div>
  <div style="width:210px; float:left; margin-left:2%; ">
  <div class="persXYZ">
   <div style="transform:rotateY(45deg); -webkit-transform:rotateY(45deg);" class="commonXYZ">

   </div>
  </div>
  <p>transform:rotateY(45deg);</p>
 </div>
</div>
<script>



writeXValue = document.getElementById("writeX");
writeYValue = document.getElementById("writeY");
writeZValue = document.getElementById("writeZ");

setXValue = document.getElementsByClassName("transformBoxX");
setYValue = document.getElementsByClassName("transformBoxY");
setZValue = document.getElementsByClassName("transformBoxZ");

function rotationxUpdate(){
	setInterval(rotationx,1);
}

function rotationyUpdate(){
	setInterval(rotationy,1);
}

function rotationzUpdate(){
	setInterval(rotationz,1);
}
function rotationx(){
	getXValue = document.getElementById("rotateXs").value;
	setXValue[0].style.transform = "rotateX("+getXValue+"deg)";
	setXValue[0].style.webkitTransform = "rotateX("+getXValue+"deg)";
	writeXValue.innerHTML = getXValue;
}

function rotationy(){
	getYValue = document.getElementById("rotateYs").value;
	setYValue[0].style.webkitTransform = "rotateY("+getYValue+"deg)";
	setYValue[0].style.transform = "rotateY("+getYValue+"deg)";
	writeYValue.innerHTML = getYValue;
}
function rotationz(){
	getZValue = document.getElementById("rotateZs").value;
	setZValue[0].style.transform = "rotateZ("+getZValue+"deg)";
	setZValue[0].style.webkitTransform = "rotateZ("+getZValue+"deg)";
	writeZValue.innerHTML = getZValue;
}


</script>

rotateZ()

roateZ() rotates the element around z-axis.

Preview Example

Try it

Example

Try it

<style>
	.rotationalCon{
	perspective:300px;
	-webkit-perspective:300px;
	width:150px;
	height:150px;
	margin:2%;
	background-color:rgb(210,210,210);
	}
	.transformBoxX{
	transform:rotateX(45deg);
	-webkit-transform:rotateX(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;
	}
	.transformBoxY{
	transform:rotateY(45deg);
	-webkit-transform:rotateY(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.transformBoxZ{
	transform:rotateZ(45deg);
	-webkit-transform:rotateZ(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.persXYZ{
	perspective:300px; -webkit-perspective:300px;
 	width:150px;
 	height:150px;
 	background-color:rgb(210,210,210);	
	}
	.commonXYZ{
	 width:150px;
 	height:150px;
 	background-color:lightskyblue; 
 	color:white;
	}

	</style>

<div style="width:100%; height:auto; float:left; clear:both;">
 <div style="width:210px; float:left; margin-left:2%;">
  <div class="persXYZ">
   <div style="transform:rotateZ(0deg); -webkit-transform:rotateZ(0deg);" class="commonXYZ">

   </div>
  </div>
  <p>transform:rotateZ(0deg);</p>
 </div>
 <div style="width:210px; float:left; margin-left:2%;">
  <div class="persXYZ">
   <div style="transform:rotateZ(45deg); -webkit-transform:rotateZ(45deg);" class="commonXYZ">

   </div>
  </div>
  <p>transform:rotateZ(45deg);</p>
 </div>
</div>
<script>



writeXValue = document.getElementById("writeX");
writeYValue = document.getElementById("writeY");
writeZValue = document.getElementById("writeZ");

setXValue = document.getElementsByClassName("transformBoxX");
setYValue = document.getElementsByClassName("transformBoxY");
setZValue = document.getElementsByClassName("transformBoxZ");

function rotationxUpdate(){
	setInterval(rotationx,1);
}

function rotationyUpdate(){
	setInterval(rotationy,1);
}

function rotationzUpdate(){
	setInterval(rotationz,1);
}
function rotationx(){
	getXValue = document.getElementById("rotateXs").value;
	setXValue[0].style.transform = "rotateX("+getXValue+"deg)";
	setXValue[0].style.webkitTransform = "rotateX("+getXValue+"deg)";
	writeXValue.innerHTML = getXValue;
}

function rotationy(){
	getYValue = document.getElementById("rotateYs").value;
	setYValue[0].style.webkitTransform = "rotateY("+getYValue+"deg)";
	setYValue[0].style.transform = "rotateY("+getYValue+"deg)";
	writeYValue.innerHTML = getYValue;
}
function rotationz(){
	getZValue = document.getElementById("rotateZs").value;
	setZValue[0].style.transform = "rotateZ("+getZValue+"deg)";
	setZValue[0].style.webkitTransform = "rotateZ("+getZValue+"deg)";
	writeZValue.innerHTML = getZValue;
}


</script>

translate(x,y) value

It translates the element along x and y axes. For example, translate(100px,100px) value translates the element 100px along x-axis and y-axis.

Example

Try it

<style>
.translate{
  transform:translate(100px,100px);	
}
</style>

2. transform-style

There are two values of the transform-style. One is flat and the other one is preserve-3d. flat is the default value of tranform-style. preserve-3d preserves the 3d nature of the child element (box).

Preview Example

Try it

Example

Try it

<style>
	.rotationalCon{
	perspective:300px;
	-webkit-perspective:300px;
	width:150px;
	height:150px;
	margin:2%;
	background-color:rgb(210,210,210);
	}
	.transformBoxX{
	transform:rotateX(45deg);
	-webkit-transform:rotateX(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;
	}
	.transformBoxY{
	transform:rotateY(45deg);
	-webkit-transform:rotateY(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.transformBoxZ{
	transform:rotateZ(45deg);
	-webkit-transform:rotateZ(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.persXYZ{
	perspective:300px; -webkit-perspective:300px;
 	width:150px;
 	height:150px;
 	background-color:rgb(210,210,210);	
	}
	.commonXYZ{
	 width:150px;
 	height:150px;
 	background-color:lightskyblue; 
 	color:white;
	}

	</style>
<br><div style="width:100%; height:auto; margin-left:1%; foat:left;">
 <div class="persXYZ">
  <div style="transform:rotateY(45deg);
transform-style:preserve-3d;
-webkit-transform:rotateY(45deg);
-webkit-transform-style:preserve-3d;
width:150px;
height:150;
background-color:lightskyblue;">
  <div style="transform:rotateX(45deg);
  -webkit-transform:rotateX(45deg);
width:150px;
height:150px;
background-color:lightgreen;">
  </div>
  </div>
 </div>
 <p>transform-style:preserve-3d;</p>
</div>
<script>



writeXValue = document.getElementById("writeX");
writeYValue = document.getElementById("writeY");
writeZValue = document.getElementById("writeZ");

setXValue = document.getElementsByClassName("transformBoxX");
setYValue = document.getElementsByClassName("transformBoxY");
setZValue = document.getElementsByClassName("transformBoxZ");

function rotationxUpdate(){
	setInterval(rotationx,1);
}

function rotationyUpdate(){
	setInterval(rotationy,1);
}

function rotationzUpdate(){
	setInterval(rotationz,1);
}
function rotationx(){
	getXValue = document.getElementById("rotateXs").value;
	setXValue[0].style.transform = "rotateX("+getXValue+"deg)";
	setXValue[0].style.webkitTransform = "rotateX("+getXValue+"deg)";
	writeXValue.innerHTML = getXValue;
}

function rotationy(){
	getYValue = document.getElementById("rotateYs").value;
	setYValue[0].style.webkitTransform = "rotateY("+getYValue+"deg)";
	setYValue[0].style.transform = "rotateY("+getYValue+"deg)";
	writeYValue.innerHTML = getYValue;
}
function rotationz(){
	getZValue = document.getElementById("rotateZs").value;
	setZValue[0].style.transform = "rotateZ("+getZValue+"deg)";
	setZValue[0].style.webkitTransform = "rotateZ("+getZValue+"deg)";
	writeZValue.innerHTML = getZValue;
}


</script>

Remove the transform-style property to understand.

3. transform-origin

It specifies the reference point for the transformation. Normally, the transform-origin is at the center of the box. The value of transform-origin may be a keyword or numerical value.

Preview Example

Try it

Example

Try it

<style>
	.rotationalCon{
	perspective:300px;
	-webkit-perspective:300px;
	width:150px;
	height:150px;
	margin:2%;
	background-color:rgb(210,210,210);
	}
	.transformBoxX{
	transform:rotateX(45deg);
	-webkit-transform:rotateX(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;
	}
	.transformBoxY{
	transform:rotateY(45deg);
	-webkit-transform:rotateY(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.transformBoxZ{
	transform:rotateZ(45deg);
	-webkit-transform:rotateZ(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.persXYZ{
	perspective:300px; -webkit-perspective:300px;
 	width:150px;
 	height:150px;
 	background-color:rgb(210,210,210);	
	}
	.commonXYZ{
	 width:150px;
 	height:150px;
 	background-color:lightskyblue; 
 	color:white;
	}

	</style>

<br>
<div style="margin-left:1%; width:100%; height:auto; float:left;">
 <div style="width:200px; float:left; margin-left:2%;">
  <div class="persXYZ">
   <div style="transform:rotateY(45deg);
 transform-origin:center;
 -webkit-transform:rotateY(45deg);
 -webkit-transform-origin:center;
 width:150px;
 height:150px;
 background-color:lightskyblue; color:white;">
 transform-orign:center;<br>
 The transform-origin (reference point) of the first lightskyblue box is at the center of the box.
   </div>
  </div>
  <p>transform-origin:center;</p>
 </div>
  <div style="width:200px; float:left; margin-left:2%; ">
  <div class="persXYZ">
   <div style="transform:rotateY(45deg);
 transform-origin:left;
 -webkit-transform:rotateY(45deg);
 -webkit-transform-origin:left;
 width:150px;
 height:150px;
 background-color:lightskyblue; color:white;">
 transform-orign:left;<br>
 The transform-origin of the second lightskyblue box is on the left side of the box.
   </div>
  </div>
  <p>transform-origin:left;</p>
 </div>
</div>
<br>

<script>



writeXValue = document.getElementById("writeX");
writeYValue = document.getElementById("writeY");
writeZValue = document.getElementById("writeZ");

setXValue = document.getElementsByClassName("transformBoxX");
setYValue = document.getElementsByClassName("transformBoxY");
setZValue = document.getElementsByClassName("transformBoxZ");

function rotationxUpdate(){
	setInterval(rotationx,1);
}

function rotationyUpdate(){
	setInterval(rotationy,1);
}

function rotationzUpdate(){
	setInterval(rotationz,1);
}
function rotationx(){
	getXValue = document.getElementById("rotateXs").value;
	setXValue[0].style.transform = "rotateX("+getXValue+"deg)";
	setXValue[0].style.webkitTransform = "rotateX("+getXValue+"deg)";
	writeXValue.innerHTML = getXValue;
}

function rotationy(){
	getYValue = document.getElementById("rotateYs").value;
	setYValue[0].style.webkitTransform = "rotateY("+getYValue+"deg)";
	setYValue[0].style.transform = "rotateY("+getYValue+"deg)";
	writeYValue.innerHTML = getYValue;
}
function rotationz(){
	getZValue = document.getElementById("rotateZs").value;
	setZValue[0].style.transform = "rotateZ("+getZValue+"deg)";
	setZValue[0].style.webkitTransform = "rotateZ("+getZValue+"deg)";
	writeZValue.innerHTML = getZValue;
}


</script>

There are many other values of the transform-origin such as right, top and bottom.

4. perspective property

It represents the projection of the box. The projection seems to be coming out of the page (3 dimensional). See the example to understand.

Preview Example

Try it

Example

Try it

<style>
	.rotationalCon{
	perspective:300px;
	-webkit-perspective:300px;
	width:150px;
	height:150px;
	margin:2%;
	background-color:rgb(210,210,210);
	}
	.transformBoxX{
	transform:rotateX(45deg);
	-webkit-transform:rotateX(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;
	}
	.transformBoxY{
	transform:rotateY(45deg);
	-webkit-transform:rotateY(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.transformBoxZ{
	transform:rotateZ(45deg);
	-webkit-transform:rotateZ(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.persXYZ{
	perspective:300px; -webkit-perspective:300px;
 	width:150px;
 	height:150px;
 	background-color:rgb(210,210,210);	
	}
	.commonXYZ{
	 width:150px;
 	height:150px;
 	background-color:lightskyblue; 
 	color:white;
	}

	</style>

<br>
<div style="margin-left:1%; width:100%; height:auto; float:left;">
<div class="persXYZ">
 <div style="transform:rotateY(45deg);
transform-style:preserve-3d;
-webkit-transform:rotateY(45deg);
-webkit-transform-style:preserve-3d;
width:150px;
height:150px;
background-color:lightskyblue;">
<p>Internal</p>
 </div>
</div>
<p>perspective:300px;</p>
</div>
<br>

<script>



writeXValue = document.getElementById("writeX");
writeYValue = document.getElementById("writeY");
writeZValue = document.getElementById("writeZ");

setXValue = document.getElementsByClassName("transformBoxX");
setYValue = document.getElementsByClassName("transformBoxY");
setZValue = document.getElementsByClassName("transformBoxZ");

function rotationxUpdate(){
	setInterval(rotationx,1);
}

function rotationyUpdate(){
	setInterval(rotationy,1);
}

function rotationzUpdate(){
	setInterval(rotationz,1);
}
function rotationx(){
	getXValue = document.getElementById("rotateXs").value;
	setXValue[0].style.transform = "rotateX("+getXValue+"deg)";
	setXValue[0].style.webkitTransform = "rotateX("+getXValue+"deg)";
	writeXValue.innerHTML = getXValue;
}

function rotationy(){
	getYValue = document.getElementById("rotateYs").value;
	setYValue[0].style.webkitTransform = "rotateY("+getYValue+"deg)";
	setYValue[0].style.transform = "rotateY("+getYValue+"deg)";
	writeYValue.innerHTML = getYValue;
}
function rotationz(){
	getZValue = document.getElementById("rotateZs").value;
	setZValue[0].style.transform = "rotateZ("+getZValue+"deg)";
	setZValue[0].style.webkitTransform = "rotateZ("+getZValue+"deg)";
	writeZValue.innerHTML = getZValue;
}


</script>

Perspective property is always used in the parent element (box). Remove or change the perspective property to understand.

Note: Always add -webkit- prefix to the transform, transition and animation type properties otherwise these properties don't work in safari.

A 3-D coordinate system consists of x, y and z-axes. X-axis is from left to right. Y-axis is from top to bottom. And Z-axis is perpendicular to this page.

CSS Tutorials

1. transform (along 3-axes)

rotate values

rotateX()

rotateY()

rotateZ()

translate(x,y) value

2. transform-style

3. transform-origin

4. perspective property