Applying 2-D and 3-D transformations

Applying 2-D transformations

You can apply 2-D transformations to elements on your web page invoking the transform across the x-axis and the y-axis.

The following code demonstrates the 2-D transformations:

<head>
<style type="text/css">
    #div1 {
            width: 200px;
            height: 200px;
            color: white;
            font-size: x-large;
            background-color: grey;
            margin-left: 250px;
            margin-top: 50px;
            margin-bottom: 50px;
            }
    #div1:hover {
        transition: transform 2s;
        /*transformation across x-axis and y-axis*/
        transform: rotateX(360deg)  rotateY(360deg);
        }
</style>
</head>
<body>
   <h2>2D (X,Y)</h2>
    <div id="div1">
        DIV1 TRANSITION EFFECTS
    </div>
</body>

Applying 3-D transformations

The 3-D transforms are the same property values as the 2-D transforms.

The addition is that each property now allows you to invoke the transform across the z-axis instead of just the x-axis and y-axis.

The following table outlines the three-dimensional transformations:

Transformation	Effect
translate	Moves the object from its current location to a new location
scale	Changes the size of the object
rotate	Spins the object along the x-axis, y-axis, and/or the z-axis
matrix	Allows you to combine all the transformations into one command

The following code demonstrates the 3-D transformations :

<head>
<style type="text/css">
    #div2 {
        width: 200px;
        height: 200px;
        color: white;
        font-size: x-large;
        background-color: grey;
        margin-left: 250px;
        margin-top: 50px;
        margin-bottom: 50px;
        }  
    #div2:hover {
        /*transformation across x-axis, y-axis and z-axis */
        /*The last parameter specifies the number of degrees to rotate. */
        transform: rotate3d(1,1,1, 360deg);
        transition: transform 2s;
        /*  transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg); */
        }
</style>
</head>
<body>
   <h2>TRASFORMATIONS 3D (X,Y,Z)</h2>
    <div id="div2">
        DIV2 TRANSITION EFFECTS
    </div>
</body>

Ads Right