CSS 2D Transform


2D transformations such as convert, rotate, scale, and skew are used to modify the element structure.

The examples below show a sample of all of the above properties.


20-degree rotation

As seen below, the box rotates at a 20-degree angle.



<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: pink;
  border: 1px solid black;
}
div#myDiv {
  /* IE 9 */
  -ms-transform: rotate(20deg);
  /* Safari */
  -webkit-transform: rotate(20deg);
  /* Standard syntax */
  transform: rotate(20deg);
}
</style>
</head>
<body>

<div>WebsitesIQ.com.</div>
<div id = "myDiv">WebsitesIQ.com</div>

</body>
</html>
Live Demo!


Output:
WebsitesIQ.com.


WebsitesIQ.com



Skew X Axis


<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: pink;
  border: 1px solid black;
}
div#skewDiv {
  /* IE 9 */
  -ms-transform: skewX(20deg);
  /* Safari */
  -webkit-transform: skewX(20deg);
  /* Standard syntax */
  transform: skewX(20deg);
}
</style>
</head>
<body>

<div>WebsitesIQ.com.</div>
<div id = "skewDiv">WebsitesIQ.com</div>

</body>
</html>
Live Demo!


Output:
WebsitesIQ.com.
WebsitesIQ.com


Skew Y Axis


<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: pink;
  border: 1px solid black;
}
div#skewDiv {
  /* IE 9 */
  -ms-transform: skewY(20deg);
  /* Safari */
  -webkit-transform: skewY(20deg);
  /* Standard syntax */
  transform: skewY(20deg);
}
</style>
</head>
<body>

<div>WebsitesIQ.com.</div>
<div id="skewDiv">WebsitesIQ.com</div>

</body>
</html>
Live Demo!


Output:
WebsitesIQ.com.
WebsitesIQ.com