CSS Tutorial - CSS3 2D Transforms

CSS transforms change the position and shape of an element.

CSS transforms can apply affine linear transformations to HTML elements.

These transformations include rotation, skewing, scaling, and translation both in the plane and in the 3D space.

CSS transforms properties

We can use the following two two properties to define CSS transforms.

transform - Specifies the transforms to apply to the element.
transform-origin - Specifies the position of the origin. By default it is at the center of the element.

translate() Method

We can use the translate() method to move the element from its current position.

We can use the translate() method to move the element from its current position.

In the following code translate(50px,100px) moves the element 50 pixels from the left, and 100 pixels from the top.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--   ww  w.  ja  v a2s.c o m-->
    width: 100px;
    height: 75px;
    background-color: red;
    border: 1px solid black;
}

div#div2 {
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */
    transform: translate(50px,100px); /* Standard syntax */
}
</style>
</head>
<body>
    <div>Hello.</div>
    <div id="div2">Hello. </div>

</body>
</html>

The code above is rendered as follows:

rotate() Method

We can use the rotate() method to rotate the element clockwise at a given degree.

We may also use negative values to rotate the element counter-clockwise.

In the following code rotate(30deg) rotates the element clockwise 30 degrees.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!-- w  w w .ja va 2s. c  o m-->
    width: 100px;
    height: 75px;
    background-color: black;
    border: 1px solid red;
}

div#div2 {
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg); /* Standard syntax */
}
</style>
</head>
<body>

    <div>Hello.</div>
    <div id="div2">Hello. </div>

</body>
</html>

The code above is rendered as follows:

scale() Method

We can use the scale() method to increase or decrease the element size.

We can change the width (X-axis) and the height (Y-axis).

In the following code scale(2,4) transforms the width to be twice its original size, and the height 4 times its original size.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from  w ww . j a  va 2s  .com-->
    width: 100px;
    height: 75px;
    background-color: blue;
    border: 1px solid black;
}

div#div2 {
    margin: 100px;
    -ms-transform: scale(2,4); /* IE 9 */
    -webkit-transform: scale(2,4); /* Chrome, Safari, Opera */
    transform: scale(2,4); /* Standard syntax */
}
</style>
</head>
<body>

<div>Hello.</div>

<div id="div2">Hello.</div>

</body>
</html>

The code above is rendered as follows:

skew() Method

We can use the skew() method to turn the element in a given angle.

We can turn the element along the horizontal (X-axis) and the vertical (Y-axis) lines.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--  ww  w .j  a v  a  2s  .co  m-->
    width: 100px;
    height: 75px;
    background-color: red;
    border: 1px solid black;
}

div#div2 {
    -ms-transform: skew(30deg,20deg); /* IE 9 */
    -webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */
    transform: skew(30deg,20deg); /* Standard syntax */
}
</style>
</head>
<body>

<div>Hello.</div>

<div id="div2">Hello.</div>

</body>
</html>

The code above is rendered as follows:

matrix() Method

The matrix() method combines all of the 2D transform methods into one.

The matrix method take six parameters, containing math functions, which allows you to: rotate, scale, move (translate), and skew elements.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--   w  w w .j  av  a  2  s .  c  o  m-->
    width: 100px;
    height: 100px;
    background-color: blue;
    border: 1px solid black;
}

div#div2 {
    -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
    -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
    transform: matrix(0.866,0.5,-0.5,0.866,0,0);
}
</style>
</head>
<body>

<div>Hello. </div>

<div id="div2">Hello. </div>

</body>
</html>

The code above is rendered as follows:

rotateX() Method

We can use the rotateX() method to rotate the element around its X-axis at a given degree.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from  w ww.  ja va 2  s  .c om-->
    width: 100px;
    height: 75px;
    background-color: red;
    border: 1px solid black;
}

div#div2 {
    -webkit-transform: rotateX(130deg);
    transform: rotateX(130deg);
}
</style>
</head>
<body>
    <div>Hello. </div>
    <div id="div2">Hello. </div>
</body>
</html>

The code above is rendered as follows:

rotateY() Method

We can use the rotateY() method to rotate the element around its Y-axis at a given degree.


<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from   w w w .j a  v a 2  s . co  m-->
    width: 100px;
    height: 75px;
    background-color: red;
    border: 1px solid black;
}

div#div2 {
    -webkit-transform: rotateY(130deg);
    transform: rotateY(130deg);
}
</style>
</head>
<body>

    <div>Hello. </div>
    <div id="div2">Hello. </div>

</body>
</html>

The code above is rendered as follows:

Related Properties

Property	Description	CSS
transform-origin	Set the position on transformed elements	3
transform-style	Set the style for transformation	3
transform	Shorthand property for transformation	3