Explain in detail CSS 3 Transformations with example.

5views

written 6.2 years ago by

binitamayekar ★ 6.6k

• modified 6.2 years ago

CSS 3 Transformations

CSS 3 transformations are a way of transforming a standard HTML element in two or three dimensional space.
CSS transforms allow to translate, rotate, scale, and skew elements.
A transformation is an effect that lets an element change shape, size and position.
CSS Transitions which are used to smoothly animate an element between two states where as transformation molds an item by moving, stretching or squeezing its co-ordinates.
To apply transformation effect, CSS uses transform property. The possible values of the transform property are as follows:
- transform – Applies a 2D or 3D transformation to an element. The possible values of this property are matrix, rotate, scale, scaleX, scaleY, skew, skewX, skewY, translate, translateX and translateY.
- transform-origin – Allows to change the position on transformed elements. The possible values of this property are left, right, center, bottom, top and 50%50%.
- transform-style – Specifies whether the transformation will apply in 2D or 3D on an element. The possible values of this property are flat and perspective 3D.
- perspective – Shows an element from different angles and perspectives.
- perspective-origin – Specifies the origin of the perspective for an element. The possible values of this property are left, right, center, bottom, top, <percentage> and 50%50%.
- backface-visibility – Specifies whether or not the back side of an element is visible. The possible value of this property are visible and hidden.

Example: Following example shows the Rotation and Skew Transformation effects in CSS 3.

<!DOCTYPE html>
<html>
<title>Transformation Effects</title>
<head>
<style> 
div.a {
    width: 150px;
    height: 80px;
    background-color: yellow;
    transform: rotate(45deg);
}
div.b {
    width: 150px;
    height: 80px;
    background-color: yellow;
    transform: skewY(20deg);
}
</style>
</head>
<body>
<center>
<h1>The Transformation Effects</h1>
<h3>Transform: rotate(45 deg):</h3><br><br>
<div class="a">Rotation Transform</div><br><br>
<h3>Transform: skewY(20 deg):</h3><br><br>
<div class="b">Skew Transform</div>
</center>
</body>
</html>

ADD COMMENT EDIT