Advanced Search

Return to Snippet

Revision: 69047
at April 10, 2015 04:57 by COBOLdinosaur
Initial Code 
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>
Initial URL 
http://coboldinosaur.com/pages/rotating-thumbnails.html
Initial Description 
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.
Initial Title 
Rotating HTML Elements With CSS
Initial Tags 
css, html
Initial Language 
CSS