Rotating in CSS3

How to rotate the element in CSS3?

By using Rotate property we can rotate the element. Rotate accepts one parameter i.e, Degree.

<style>
        ul.myGallery li {
            float: left;
            list-style: none;
            border: 1px solid #c0c0c0;
            -webkit-transition: -webkit-transform 0.5s ease-in-out;
            -moz-transition: -moz-transform 0.5s ease-in-out;
            transition: transform 0.5s ease-in-out;
            
        }

            ul.myGallery li:hover {
                -webkit-transform: scale(1.5) rotate(-10deg);
                ;
                -moz-transform: scale(1.5) rotate(-10deg);
                ;
                -o-transform: scale(1.5) rotate(-10deg);
                ;
                transform: scale(1.5) rotate(-10deg);
                ;
                -webkit-box-shadow: 4px 4px 10px red;
                -moz-box-shadow: 4px 4px 10px red;
                box-shadow: 4px 4px 10px red;
            }
</style>

<body>
    <ul class="myGallery" style="padding-top: 50px;">
        <li>
            <img src="../dotnetfunda.png" /></li>
        <li>
            <img src="../itfunda.gif" /></li>
        <li>
            <img src="../dotnetfunda.png" /></li>
        <li>
            <img src="../itfunda.gif" /></li>
    </ul>
</body>

In the above code snippet, transform css style has scale as well as rotate css property style.

OUTPUT

In the above output there are four images, if we place the cursor on the particular image, that image expands and floats left as shown in the above output.

Views: 3811 | Post Order: 100

CSS3 > Animations

Rotating in CSS3

How to rotate the element in CSS3?

Related Posts

Utility Tools