CSS3 Rotation In X, Y, Z Axes -Tutorial Savvy

CCS3 provides rotation transformation along with transition.
It means we can use x,y,z rotation of an object along with the transition in time.
Testing the rotation rotationdemo.html,

<!DOCTYPE html>
<html>
    
    <head>
        <title>CSS3 Rotation Demo</title>
        <style>
            body {
                display: inline-block;
            }
            div.name-sandeep {
                color:white;
                text-align:center;
                padding:100px;
                width:100px;
                height:75px;
                background:brown;
                border:4px solid red;
                border-radius:0px;
                float:left;
                transition:transform 4s;
                -moz-transition:transform 4s;
                -webkit-transition:transform 4s;
                -o-transition:transform 4s;
            }
            div.name-sandeep:hover {
                transform:rotateX(360deg);
                -webkit-transform:rotateX(360deg);
                -moz-transform:rotateX(360deg);
            }
            div.name-kumar {
                color:white;
                text-align:center;
                padding:100px;
                width:100px;
                height:75px;
                background:blue;
                border:4px solid red;
                border-radius:0px;
                float:left;
                transition:transform 4s;
                -moz-transition:transform 4s;
                -webkit-transition:transform 4s;
                -o-transition:transform 4s;
            }
            div.name-kumar:hover {
                transform:rotateY(360deg);
                -webkit-transform:rotateY(360deg);
                -moz-transform:rotateY(360deg);
            }
            div.name-saan {
                color:white;
                text-align:center;
                padding:100px;
                width:100px;
                height:75px;
                background:yellow;
                border:4px solid red;
                border-radius:0px;
                float:left;
                transition:transform 4s;
                -moz-transition:transform 4s;
                -webkit-transition:transform 4s;
                -o-transition:transform 4s;
            }
            div.name-saan:hover {
                transform:rotateZ(360deg);
                -webkit-transform:rotateZ(360deg);
                -moz-transform:rotateZ(360deg);
            }
        </style>
    </head>
    
    <body>
        <div class="name-sandeep">SANDEEP</div>
        <div class="name-kumar">KUMAR</div>
        <div class="name-saan">SAAN</div>
    </body>

</html>