how to transform in css

Posted under CSS3 Course On By mohammed.mutawe

transform in css

It is strange that a descriptive language has the characteristics of animation, but this is possible in CSS, which has strong advantages in web pages in general , In this lesson, we will demonstrate three main CSS animation commands so that we can apply them together.

 

Definition

css.tag
{

    transform://do something;
}

In fact, implementing a transform is very easy in CSS and this syntax shows the process of calling the transform function to do something.

 

Types

Transform in CSS are divided to :

  • Rotation : It is the process of rotating the elements inside the HTML without regard to their content whatsoever.
  • Skew : The deviation of the elements with a value of x or y coordinate.
  • Scaling : Change the size of the elements to be larger or smaller.

 

Benefits

The transform function in css will enable us to save time to do quick Transform jobs. When you use CSS animations, you will have saved time using JavaScript, for example, and this is a feature of CSS.

 

Example

Please, to understand CSS transform well, copy the following codes into a text file and do not forget to change its extension to .html and then run it in your browser.

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>2D Transform types in CSS</title>
        <style>

        #rot
{
    background-color:#D9D9D9;
    padding:10px;
    border:1px solid #11A8A0;
    font-family:Arial , Tahoma;
    width:300px;
    margin:100px auto;
    text-align:center;
    transform:rotate(-30deg);

}


#sk
{
    background-color:#DD3135;
    padding:10px;
    border:1px solid #11A8A0;
    font-family:Arial , Tahoma;
    width:300px;
    margin:100px auto;
    text-align:center;
    transform:skewY(20deg);

}

#scale
{
    background-color:#806565;
    padding:10px;
    border:1px solid #11A8A0;
    font-family:Arial , Tahoma;
    width:300px;
    margin:100px auto;
    text-align:center;
    transform:scaleX(1.5);

}
        </style>
    </head>

    <body>
        <div>
            <h3 id = "rot">This is rotation</h3>
            <h3 id = "sk">This is skew</h3>
            <h3 id = "scale">This is scale</h3>
        </div>
    </body>

</html>

 

 

 

Leave a comment

Your email address will not be published. Required fields are marked *