Rotating HTML Elements With CSS

The base rotation can be in three different planes; though as we will see later combinations can make it look like we rotate through many perceived planes. In the examples below instead of rotate we specify the plane by using rotateZ (The default we have been using), rotateX, and rotateY.


                                          The CSS looks like this: .basicRotateBox {
    width: 200px;
    float: left;
    margin-left: 10px;
    border: 2px solid navy;
    border-radius: 12px;
    text-align: center;
    background-color: white;
}
 button:hover~figure #rotate6  {
    -webkit-transform: rotateZ(850deg);
    transform: rotateZ(850deg);
    transition-property: transform, -webkit-transform;
    transition-duration: 2s;
}
button:hover~figure #rotate7  {
    -webkit-transform: rotateX(720deg);
    transform: rotateX(720deg);
    transition-property: transform, -webkit-transform;
    transition-duration: 2.5s;
}
button:hover~figure #rotate8  {
    -webkit-transform: rotateY(1080deg);
    transform: rotateY(1080deg);
    transition-property: transform, -webkit-transform;
    transition-duration: 3s;
}
 The markup is:  
;