/    /  CSS translate

CSS translate

 

The transform CSS property is used to transform to an element such as translate, rotate, scale, etc. in 2D or 3D space.

 

Syntax:

 

transform: [ transform-function ] 1 or more values | none | initial | inherit

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
 width: 150px;
 height: 80px;
 background-color: pink;
 -ms-transform: rotate(20deg); /* IE 9 */
 transform: rotate(20deg);
}

div.b {
 width: 150px;
 height: 80px;
 background-color: pink;
 -ms-transform: skewY(20deg); /* IE 9 */
 transform: skewY(20deg);
}

div.c {
 width: 150px;
 height: 80px;
 background-color: pink;
 -ms-transform: scaleY(1.5); /* IE 9 */
 transform: scaleY(1.5);
}
</style>
</head>
<body>

<h1>The transform Property</h1>

<h2>transform: rotate(20deg):</h2>
<div class="a">I2Tutorials!</div>
<br>

<h2>transform: skewY(20deg):</h2>
<div class="b">I2Tutorials!</div>
<br>

<h2>transform: scaleY(1.5):</h2>
<div class="c">I2Tutorials!</div>

</body>
</html>

 

OUTPUT:

 

 

Property Values:

 

none                                                    no transformation

matrix(n,n,n,n,n,n)                              using a matrix of six values

matrix3d

(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)           using a 4×4 matrix of 16 values

translate(x,y)                                       Defines a 2D translation

translate3d(x,y,z)                                Defines a 3D translation

translateX(x)                                       using only the value for the X-axis

translateY(y)                                      using only the value for the Y-axis

translateZ(z)                                        using only the value for the Z-axis

scale(x,y)                                            2D scale transformation

scale3d(x,y,z)                                      3D scale transformation

scaleX(x)                                              scale transformation by giving a value for the X-axis

scaleY(y)                                              scale transformation by giving a value for the Y-axis

scaleZ(z)                                              scale transformation by giving a value for the Z-axis

rotate(angle)                                       2D rotation, the angle is specified in the parameter

rotate3d(x,y,z,angle)                           Defines a 3D rotation

rotateX(angle)                                     3D rotation along the X-axis

rotateY(angle)                                     3D rotation along the Y-axis

rotateZ(angle)                                     3D rotation along the Z-axis

skew(x-angle,y-angle)                         2D skew transformation along the X- and the Y-axis

skewX(angle)                                       2D skew transformation along the X-axis

skewY(angle)                                       2D skew transformation along the Y-axis

perspective(n)                                     Perspective view for a 3D transformed element

initial                                                   Its default value.

inherit                                                 Its parent element.