CSS3 Rotate Div

How To Rotate A Div Using CSS3

css3 rotate div



In This CSS Tutorial we will see How To Rotate Div In Mouse Hover With Transition Using HTML And CSS3 Transform Property In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 - Rotate Div</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .container{
                background-color: #ddd;
                padding: 25px;
            }
            
            .content{
                width: 100px;height: 100px;background-color: red;
                transition: all 2s ease-in-out;
                transform: rotate(45deg);
            }
            .content:hover{
                transform: rotate(-180deg);
            }
            
            .child{width: 25px;height: 25px;}
            .child1{float: left;background-color: black;}
            .child2{float: right;background-color: yellow;}
            .child3{float: left;background-color: #fff;margin-top: 50%}
            .child4{float: right;background-color: blue;margin-top: 50%}
            
            .clearFloat{clear: both}
            
        </style>
        
    </head>
    <body>
        
        <div class="container">
            <div class="content">
                <div class="child child1"></div>
                <div class="child child2"></div>
                <div class="clearFloat"></div>
                <div class="child child3"></div>
                <div class="child child4"></div>
            </div>
        </div>
        
    </body>
</html>




Share this

Related Posts

Previous
Next Post »