Posted By

COBOLdinosaur on 04/10/15


Tagged

css html rotation


Versions (?)

Rotating HTML Elements With CSS


 / Published in: CSS
 

URL: 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.

  1. The CSS looks like this:
  2.  
  3. .basicRotateBox {
  4. width:200px;
  5. float:left;
  6. margin-left:10px;
  7. border:2px solid navy;
  8. border-radius: 12px;
  9. text-align:center;
  10. background-color:white;
  11. }
  12.  
  13. button:hover~figure #rotate6 {
  14. -webkit-transform:rotateZ(850deg);
  15. transform:rotateZ(850deg);
  16. transition-property: transform, -webkit-transform;
  17. transition-duration:2s;
  18. }
  19. button:hover~figure #rotate7 {
  20. -webkit-transform:rotateX(720deg);
  21. transform:rotateX(720deg);
  22. transition-property: transform, -webkit-transform;
  23. transition-duration:2.5s;
  24. }
  25. button:hover~figure #rotate8 {
  26. -webkit-transform:rotateY(1080deg);
  27. transform:rotateY(1080deg);
  28. transition-property: transform, -webkit-transform;
  29. transition-duration:3s;
  30. }
  31.  
  32. The markup is:
  33.  
  34. <figure class="basicRotateBox">
  35. <img id="rotate6" src="../images/thumbs/home.png" alt="thumb" />
  36. </figure>
  37. <figure class="basicRotateBox">
  38. <img id="rotate7" src="../images/thumbs/home.png" alt="thumb" />
  39. </figure>
  40. <figure class="basicRotateBox">
  41. <img id="rotate8" src="../images/thumbs/home.png" alt="thumb" />
  42. </figure>

Report this snippet  

You need to login to post a comment.