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.
We can use the following two two properties to define CSS transforms.
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:
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:
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:
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:
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:
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:
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:
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 |