How Do You Make A 2D and 3D Effect In CSS

admin_img Posted By Bajarangi soft , Posted On 30-09-2020

CSS transforms allow you to move, rotate, scale, and skew elements,Mouse over the element below to see a 2D transformation,CSS also supports 3D transformations, Mouse over the elements below to see the difference between a 2D and a 3D transformation:

2D and 3D Effects In Css

1.2D Transform In Css With Example

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 300px;
            height: 100px;
            background-color: yellow;
            border: 1px solid black;
        }

        div#myDiv {
            -ms-transform: rotate(20deg); /* IE 9 */
            transform: rotate(20deg); /* Standard syntax */
        }
        div.myDiv{
            -ms-transform: rotate(-20deg);
            transform:rotate(-20deg);
        }
    </style>
</head>
<body>

<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
    This a normal div element.
</div>

<div id="myDiv">
    This div element is rotated clockwise 20 degrees.
</div>
<br>
<div class="myDiv">
    This div element is rotated counter-clockwise with 20 degrees.
</div>
</body>
</html>

2.3D Transform In Css With Example
<!DOCTYPE html>
<html>
<head>
    <style>

.aa{
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

        #aa{
            transform: rotateX(150deg);
        }


    </style>
</head>
<body>

<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>
<br>
<h2>3D Transform</h2>

<div class="aa">
    This a normal div element.
</div>

<div id="aa">
    This div element is rotated 150 degrees.
</div>
</body>
</html>

Related Post