CSS3 2D Transforms

0 3397

CSS3 2D transforms are used to re-change the element structure as translate, rotate, scale, and skew.

2D transformation methods:

-scale()
-translate()
-skewX()
-rotate()
-matrix()
-skewY()

1) - scale()

Scale function two values will stretch it horizontally by the first and vertically by the second.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.scale {
width: 400px;
height: 50px;
padding:10px;
margin-top:100px;
background-color: #0066FF;
color:#FFFFFF;
border: 1px solid #ddd;
transform: scale(1, 2);
-webkit-transform: scale(1, 2);
-ms-transform: scale(1, 2);
}
</style>
</head>

<body>
<div class="scale">Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae aliquam dolor leo sit amet urna.
</div>
</body>

</html>

Result:

2) - translate()

The translate method is current position according to the parameters given for the X-axis and the Y-axis.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.matrix {
width: 400px;
height: 100px;
padding:10px;
background-color:#795548;
color:#FFFFFF;
border: 1px solid #ddd;
transform: translate(25px,25px);
-webkit-transform: translate(25px,25px);
-ms-transform: translate(25px,25px);
}
</style>
</head>
<body>
<div class="matrix">Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae aliquam dolor leo sit amet urna. Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae aliquam dolor leo sit amet urna. Pellentesque ornare, leo a suscipit hendrerit, massa
</div>
</body>
</html>

Result:

3) skewX()

The skewX() method skews an element along the X-axis angle.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.skewX {
width: 400px;
height: 150px;
padding:10px;
background-color: #8bc34a;
color:#FFFFFF;
border: 1px solid #ddd;
transform: skewX(20deg);
-webkit-transform: skewX(20deg);
-ms-transform: skewX(20deg);
}
</style>
</head>
<body>
<div class="skewX">Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae aliquam dolor leo sit amet urna. Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae aliquam dolor leo sit amet urna. Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae
</div>
</body>
</html>

Result:

4) rotate()

The rotate value provides the ability to rotate an element from 0 to 360 degrees.

<!DOCTYPE html>
<html>
<head>
<style type=“text/css”>
.rotate {
width: 400px;
height: 150px;
padding:10px;
margin-top:150px;
background-color: #0066FF;
color:#FFFFFF;
border: 1px solid #ddd;
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
}
</style>
</head>
<body>
<div type="rotate">Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae aliquam dolor leo sit amet urna. Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae aliquam dolor leo sit amet urna. Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae
</div>
</body>
</html>

Result:

5) matrix()

The matrix() method combines all the 2D transform method.

all property - matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.matrix {
width: 400px;
height: 150px;
padding:10px;
background-color:#009688;
color:#FFFFFF;
border: 1px solid #ddd;
transform: matrix(0.1, -0.9, -0.6, 0.8, 2, 50);
-webkit-transform: matrix(0.1, -0.9, -0.6, 0.8, 2, 150);
-ms-transform:matrix(0.1, -0.9, -0.6, 0.8, 2, 150);
}
</style>
</head>
<body>
<div class="matrix">Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae aliquam dolor leo sit amet urna. Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae aliquam dolor leo sit amet urna. Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae
</div>
</body>
</html>

Result:

6) skewY()

The skewY() method skews an element along the Y-axis angle.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.skewY {
width: 300px;
height: 100px;
padding:10px;
margin-top:200px;
background-color: #FF9800;
color:#FFFFFF;
border: 1px solid #ddd;
transform: skewY(30deg);
-webkit-transform: skewY(30deg);
-ms-transform: skewY(30deg);

}
</style>
</head>
<body>
<div class="skewY">Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae aliquam dolor leo sit amet urna. Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae aliquam dolor leo sit amet urna. Pellentesque ornare, leo a suscipit hendrerit, massa tortor tempor eros, vitae
</div>
</body>
</html>