Posted By

COBOLdinosaur on 04/10/15

Tagged

css
html

Versions (?)

Last Edited at 04/10/15 04:57am

Statistics

Viewed 1148 times

Favorited by 0 user(s)

Related snippets

Rotating HTML Elements With CSS

/ Published in: 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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

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>