CSS Property transform

The CSS transform property visually manipulates element and transforms their appearance.

The transform property applies a 2D or 3D transformation to an element.

This property allows you to rotate, scale, move, skew, etc., elements.

The following code transform a div element.

div {
  transform: transform-function || none; /* can list multiple, space-separated */
}

To get browser support with proper prefixes:

div {
  -webkit-transform: value;
  -moz-transform:    value;
  -ms-transform:     value;
  -o-transform:      value;
  transform:         value;
}

Summary

Initial value: none
Inherited: no
CSS Version: CSS3
JavaScript syntax: object.style.transform="rotate(7deg)"
Animatable: yes

CSS Syntax

transform: none|transform-functions|initial|inherit;

Property Values

none: no transformation
matrix(n,n,n,n,n,n): Create a 2D transformation using a matrix of six values
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): Create a 3D transformation, using a 4x4 matrix of 16 values
translate(x,y): Create a 2D translation
translate3d(x,y,z): Create a 3D translation
translateX(x): translation for the X-axis
translateY(y): translation for the Y-axis
translateZ(z): 3D translation using only the value for the Z-axis
scale(x,y): a 2D scale transformation
scale3d(x,y,z): a 3D scale transformation
scaleX(x): a scale transformation for the X-axis
scaleY(y): a scale transformation for the Y-axis
scaleZ(z): a 3D scale transformation for the Z-axis
rotate(angle): a 2D rotation with the angle
rotate3d(x,y,z,angle): a 3D rotation
rotateX(angle): a 3D rotation along the X-axis
rotateY(angle): a 3D rotation along the Y-axis
rotateZ(angle): a 3D rotation along the Z-axis
skew(x-angle,y-angle): a 2D skew transformation along the X- and the Y-axis
skewX(angle): a 2D skew transformation along the X-axis
skewY(angle): a 2D skew transformation along the Y-axis
perspective(n): a perspective view for a 3D transformed element

Browser compatibility


`transform`	36.0 (4.0 -webkit-)	10.0 (9.0 -ms-)	Yes	Yes	Yes

matrix

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from w  ww  .  j av a2 s  .  c o m-->
    width: 100px;
    height: 75px;
    background-color: black;
    border: 1px solid red;
}

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

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

</body>
</html>

Click to view the demo

rotate

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

div#div2 {
   
  -webkit-transform: rotate(30deg);
  -moz-transform:    rotate(30deg);
  -ms-transform:     rotate(30deg);
  -o-transform:      rotate(30deg);
  transform:         rotate(30deg);    
}
</style>
</head>
<body>

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

</body>
</html>

Click to view the demo

translate

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

div#div2 {
   
  -webkit-transform: translate(10px);
  -moz-transform:    translate(10px);
  -ms-transform:     translate(10px);
  -o-transform:      translate(10px);
  transform:         translate(10px);
}
</style>
</head>
<body>

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

</body>
</html>

Click to view the demo

translateX

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

div#div2 {
   
  -webkit-transform: translateX(10px);
  -moz-transform:    translateX(10px);
  -ms-transform:     translateX(10px);
  -o-transform:      translateX(10px);
  transform:         translateX(10px);
}
</style>
</head>
<body>

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

</body>
</html>

Click to view the demo

translateY

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

div#div2 {
   
  -webkit-transform: translateY(10px);
  -moz-transform:    translateY(10px);
  -ms-transform:     translateY(10px);
  -o-transform:      translateY(10px);
  transform:         translateY(10px);
}
</style>
</head>
<body>

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

</body>
</html>

Click to view the demo

scale

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

div#div2 {
   
  -webkit-transform: scale(1.1);
  -moz-transform:    scale(1.1);
  -ms-transform:     scale(1.1);
  -o-transform:      scale(1.1);
  transform:         scale(1.1);
}
</style>
</head>
<body>

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

</body>
</html>

Click to view the demo

scaleX

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

div#div2 {
   
  -webkit-transform: scaleX(1.1);
  -moz-transform:    scaleX(1.1);
  -ms-transform:     scaleX(1.1);
  -o-transform:      scaleX(1.1);
  transform:         scaleX(1.1);
}
</style>
</head>
<body>

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

</body>
</html>

Click to view the demo

scaleY

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

div#div2 {
   
  -webkit-transform: scaleY(1.1);
  -moz-transform:    scaleY(1.1);
  -ms-transform:     scaleY(1.1);
  -o-transform:      scaleY(1.1);
  transform:         scaleY(1.1);
}
</style>
</head>
<body>

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

</body>
</html>

Click to view the demo

skew

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

div#div2 {
   
  -webkit-transform: skew(10deg,10deg));
  -moz-transform:    skew(10deg,10deg));
  -ms-transform:     skew(10deg,10deg));
  -o-transform:      skew(10deg,10deg));
  transform:         skew(10deg,10deg));
}
</style>
</head>
<body>

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

</body>
</html>

Click to view the demo

skewX

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

div#div2 {
   
  -webkit-transform: skewX(10deg));
  -moz-transform:    skewX(10deg));
  -ms-transform:     skewX(10deg));
  -o-transform:      skewX(10deg));
  transform:         skewX(10deg));
}
</style>
</head>
<body>

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

</body>
</html>

Click to view the demo

skewY

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

div#div2 {
   
  -webkit-transform: skewY(10deg));
  -moz-transform:    skewY(10deg));
  -ms-transform:     skewY(10deg));
  -o-transform:      skewY(10deg));
  transform:         skewY(10deg));
}
</style>
</head>
<body>

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

</body>
</html>

Click to view the demo