2D transformation of an element in CSS

2D transformation of an element

In CSS3 2D transform property, you can apply basic transformations like move an element from its normal position, rotate an element, scale an element and skew an element in two-dimensional area. The element which has been transformed does not affect surrounding area’s element but it can overlap surrounding element. However, the transformed element still takes space at its normal position. Let us study how we apply 2D transformation of an element in CSS.

The CSS3 transform property uses the transform functions to manipulate the coordinate geometry of an element so that the transformation effect may be applied.

The following methods of CSS3 transform property can be used:

  • translate()
  • rotate()
  • scale()
  • scaleX()
  • scaleY
  • skew()
  • skewX()
  • skewY()

translate() method in CSS

This method moves an element from its current position to a new position by applying X-axis and Y-axis parameters. Its syntax is translate(x,y). If y parameter has not been given, then it will be assumed as zero. Let us write a code to move a box from its current position to its new position.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform</title>
    <style>
        .box{
            border:3px solid rgb(218, 159, 159);
            height:150px;
            width:150px;
            background-color: rgb(223, 208, 211);
        }
        #box1{
            border:3px solid red;
            height:150px;
            width:150px;
            background-color: pink;
            transform:translate(50px, 50px);           
        }        
    </style>
</head>
<body>
    <h3>Translate in 2D transformation</h3>
    <div class="box">
        <p>Position before translate</p>
    </div>
    <div id="box1">
        <p>Position after translate</p>
    </div>
</body>
</html>
translate() method in CSS, www.programmingtutorial.in

rotate() method in CSS

The rotate() method rotates an element around its origin as specified by transform-origin property. This method rotates an element clockwise or anti-clockwise as per the angle given. You can rotate an element anti-clockwise by giving negative degree value. Let us write a code to explain the concept.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform</title>
    <style>
        div.box{
            display:inline-block;
        }
        div#box1{
            border:3px solid rgb(218, 159, 159);
            height:150px;
            width:150px;
            background-color: rgb(223, 208, 211);
        }
        div#box2{
            border:3px solid red;
            height:150px;
            width:150px;
            background-color: pink;
            transform:rotate(45deg); 
            margin-left:80px;               
        }        
    </style>
</head>
<body>
    <h3>Rotate property in 2D transformation</h3>
        <div class="box" id="box1">
            <p>Box without rotation</p>
        </div>
        <div class="box" id="box2">
            <p>Box with rotation of 45 degree</p>
        </div>
</body>
</html>
rotate() method in CSS, www.programmingtutorial.in

scale() method in CSS

The scale() method helps you to increase or decrease the size of an element you want to. It works as per the height and width parameter given. It can be written as scale(sx, sy). If sy is not given, then it is assumed as sx. Let us write a code now:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scale property</title>
    <style>
        div.box{
            display:inline-block;
        }
        div#box1{
            border:3px solid rgb(218, 159, 159);
            height:100px;
            width:100px;
            background-color: rgb(223, 208, 211);
        }
        div#box2{
            border:3px solid red;
            height:100px;
            width:100px;
            background-color: pink;
            transform:scale(2, 3);
            margin-left:150px; 
            margin-top:150px;              
        }        
    </style>
</head>
<body>
    <h3>Scale property in 2D transformation</h3>
        <div class="box" id="box1">
            <p>Box without scaling</p>
        </div>
        <div class="box" id="box2">
            <p>Box with scaling</p>
        </div>
</body>
</html>
scale() method in CSS, www.programmingtutorial.in

Here the second box is scaled with increased width 2 times and height 3 times to an original size.

The scaleX takes only single value and increases or decreases size along x-axis as per the value given. Similarly, scaleY takes only single value and increases or decreases size along y-axis as per the value given.

skew() method in CSS

The skew() method skews an element along x-axis and y-axis by a specified angle. It is written as skew(ax, ay). If ay is not given then, it is assumed to be 0. Let us write a code now:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skew property</title>
    <style>
        div.box{
            display:inline-block;
        }
        div#box1{
            border:3px solid rgb(218, 159, 159);
            height:100px;
            width:100px;
            background-color: rgb(223, 208, 211);
        }
        div#box2{
            border:3px solid red;
            height:100px;
            width:100px;
            background-color: pink;
            transform:skew(10deg, 20deg);
            margin-left:100px; 
            margin-top:50px;              
        }        
    </style>
</head>
<body>
    <h3>Skew property in 2D transformation</h3>
        <div class="box" id="box1">
            <p>Box without skew</p>
        </div>
        <div class="box" id="box2">
            <p>Box with skew</p>
        </div>
</body>
</html>
skew() method in CSS, www.programmingtutorial.in