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:

<figure class="basicRotateBox">
<img   id="rotate6" src="../images/thumbs/home.png" alt="thumb" />
</figure>
<figure class="basicRotateBox">
<img   id="rotate7" src="../images/thumbs/home.png" alt="thumb" />
</figure>
<figure class="basicRotateBox">
<img   id="rotate8" src="../images/thumbs/home.png" alt="thumb" />
</figure>

http://coboldinosaur.com/pages/rotating-thumbnails.html

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.

Rotating HTML Elements With CSS

css, html

CSS