Applying a transform

Transforms enable you to change an element’s appearance. You can make an element larger or smaller, rotate it, and so on.

To add a transform to an element, you declare it in the CSS by adding the transform property as follows:

<style type="text/css">
    .class-name or #id-name {
        transform: rotate(90deg);
    }
</style>

Using the rotate method

The rotate transform method rotate an object by a specified number of degrees. The method accepts a single parameter that specifies the number of degrees.

To rotate an element clockwise you specify a positive number of degrees (example 90deg), otherwise to rotate counterclockwise, you specify a negative number of degrees (example -90deg).

The following code applies a rotate by 90deg clockwise:

<head>
<style>
    #image1 { 
        height: 150px; 
        width: 225px; 
    }
    .rotate { 
        transform: rotate(90deg); 
    }
</style>
</head>
<body>
    <table border="1">
    <tr>
       <td style="width:30%;">
           <input type="submit" onclick="rotateMethod()" value="ROTATE(90deg)" />
       </td>
       <td>
           <img id="image1" src="image.jpg" style="position:relative" />
       </td>
    </tr>
    </table>
    <!-- TRASFORM : ROTATE (90deg) -->
<script>
    var rotateMethod = function () {
        var apply = document.getElementById("orange1").classList.add("rotate");
    }
</script>
</body>

The transform also supports the rotateX and rotateY methods, which accept a single parameter in degrees to specify an angle around the x-axis or y-axis in which to rotate.

Using the translate method

The translate method lets you move an HTML element by changing its relative X and Y position on the page. The translate method moves the HTML element in the X direction and the Y direction relative to where it resides.

The following code applies a translate by 50px in the X direction and 0px in the Y direction:

<head>
<style>
    #image1 { 
        height: 150px; 
        width: 225px; 
    }
    .translate { 
        transform: translate(250px, 0px); 
    }
</style>
</head>
<body>
    <table border="1">
    <tr>
       <td style="width:30%;">
           <input type="submit" onclick="traslateMethod()" value="TRASNLATE(250px, 0px)" />
       </td>
       <td>
           <img id="image1" src="image.jpg" style="position:relative" />
       </td>
    </tr>
    </table>
    <!-- TRASFORM : TRASLATE (250px, 0px) -->
<script>
    var traslateMethod = function () {
        var apply = document.getElementById("image1").classList.add("translate");
    }
</script>
</body>

The translate also support translateX and translateY methods if the desired effect is to move the object around the x-axis or y-axis.

Using the skew method

You can skew an HTML element using the skew method of the transform property. Skewing slants the object so that it’s not parallel to the vertical or horizontal axis.

The following code applies the skew method:

<head>
<style>
    #image1 { 
        height: 150px; 
        width: 225px; 
    }
    .skew { 
        transform: skew(10deg, 10deg); 
    }
</style>
</head>
<body>
    <table border="1">
    <tr>
       <td style="width:30%;">
           <input type="submit" onclick="skewMethod()" value="SKEW(10deg, 10deg)" />
       </td>
       <td>
           <img id="image1" src="image.jpg" style="position:relative" />
       </td>
    </tr>
    </table>
    <!-- TRASFORM : SKEW (10deg, 10deg) -->
<script>
    var skew = function () {
        var apply = document.getElementById("image1").classList.add("skew");
    }
</script>
</body>

Using the scale method

The scale method resize the elements by a specified ratio. The scale method takes one parameter: a decimal value that represents the percentage to scale.

When the value is:

greater than 1 makes the object larger
less than 1 but greater than 0 makes the object smaller

The following code increases the size of the element by 50 percent multiplying the existing height and width values by 1.5 and expanding it in all directions:

<head>
<style>
    #image1 { 
        height: 150px; 
        width: 225px; 
    }
    .scale { 
        transform: scale(1.5); 
    }
</style>
</head>
<body>
    <table border="1">
    <tr>
       <td style="width:30%;">
           <input type="submit" onclick="scaleMethod()" value="SCALE(1.5)" />
       </td>
       <td>
           <img id="image1" src="image.jpg" style="position:relative" />
       </td>
    </tr>
    </table>
    <!-- TRASFORM : SCALE (1.5) -->
<script>
    var scale = function () {
        var apply = document.getElementById("image1").classList.add("scale");
    }
</script>
</body>

Combining transformations

The transform style isn’t limited to specifying a single transformation method. You can combine the methods to apply multiple effects to the element.

The code below applies three effects: the translate, the scale and finally the skew:

<head>
<style type="text/css">
    #image1 { 
        height: 150px; 
        width: 225px; 
    }
    .combination {
        transform: translate(100px,0px) scale(1.5) skew(20deg, 30deg);
        }
</style>
</head>
<body>
    <table border="1">
    <tr>
       <td style="width:30%;">
           <input type="submit" onclick="combinationMethod()" value="COMBINING;" />
       </td>
       <td>
           <img id="image1" src="image.jpg" style="position:relative" />
       </td>
    </tr>
    </table>
    <!-- TRASFORM : translate(100px,0px) scale(1.5) skew(20deg, 30deg); -->
<script type="text/javascript">
    var combinationMethod = function () {
        var scaleMethods = document.getElementById("image1").classList.add("combination");
    }
</script>
</body>

Ads Right