/css/style.css

https://bitbucket.org/sgospodarets/cross-browser-rotate-box · CSS · 51 lines · 48 code · 0 blank · 3 comment · 0 complexity · c0aafa6387f1a2b4701e2c228489b261 MD5 · raw file

  1. /* reset */
  2. body{
  3. margin:0;
  4. color:#000;
  5. font:16px/18px Arial, Verdana, Tahoma, sans-serif;
  6. background:#fff;
  7. }
  8. img{
  9. border-style:none;
  10. vertical-align: top;
  11. }
  12. /* styles */
  13. #wrapper{
  14. width: 950px;
  15. margin: auto;
  16. }
  17. .rotate-wrapper{
  18. width: 100px;
  19. height: 100px;
  20. overflow: hidden;
  21. position: relative;
  22. border: 5px solid #ccc;
  23. float: left;
  24. }
  25. .center-text{
  26. position: absolute;
  27. top: 0;
  28. left: 0;
  29. width: 100px;
  30. line-height: 100px;
  31. text-align: center;
  32. }
  33. .rotate{
  34. position: relative;
  35. float: left;
  36. }
  37. /* rotate image with CSS3 if possible */
  38. .csstransforms.csstransitions .rotate{
  39. -webkit-transition: all .5s ease-in-out;
  40. -moz-transition: all .5s ease-in-out;
  41. -o-transition: all .5s ease-in-out;
  42. -ms-transition: all .5s ease-in-out;
  43. transition: all .5s ease-in-out;
  44. }
  45. .csstransforms.csstransitions .rotate-wrapper:hover .rotate{
  46. -webkit-transform:rotate(90deg);
  47. -moz-transform:rotate(90deg);
  48. -o-transform:rotate(90deg);
  49. -ms-transform:rotate(90deg);
  50. transform:rotate(90deg);
  51. }