CSS3 Roll Links


/ Published in: CSS
Save to your folder(s)

Cross-browser roll link effect in CSS3. Works in IE 10+, Webkit (Chrome/Safari/etc), Opera, Gecko (Firefox/Seamonkey/etc). Degrades nicely for unsupported browsers.


Copy this code and paste it in your HTML
  1. /* CSS3 ROLL LINKS */
  2.  
  3. .roll-link {
  4. display: inline-block;
  5. overflow: hidden;
  6. vertical-align: top;
  7.  
  8. -webkit-perspective: 600px;
  9. -moz-perspective: 600px;
  10. -ms-perspective: 600px;
  11.  
  12. -webkit-perspective-origin: 50% 50%;
  13. -moz-perspective-origin: 50% 50%;
  14. -ms-perspective-origin: 50% 50%;
  15.  
  16. }
  17.  
  18. .roll-link:hover {text-decoration:none;}
  19.  
  20. .roll-link span {
  21. display: block;
  22. position: relative;
  23. padding: 0 2px;
  24.  
  25. -webkit-transition: all 400ms ease;
  26. -moz-transition: all 400ms ease;
  27. -ms-transition: all 400ms ease;
  28.  
  29. -webkit-transform-origin: 50% 0%;
  30. -moz-transform-origin: 50% 0%;
  31. -ms-transform-origin: 50% 0%;
  32.  
  33. -webkit-transform-style: preserve-3d;
  34. -moz-transform-style: preserve-3d;
  35. -ms-transform-style: preserve-3d;
  36. }
  37. .roll-link:hover span {
  38. background: #DD4D42;
  39.  
  40. -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
  41. -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
  42. -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
  43. }
  44.  
  45. .roll-link span:after {
  46. content: attr(data-title);
  47.  
  48. display: block;
  49. position: absolute;
  50. left: 0;
  51. top: 0;
  52. padding: 0 2px;
  53.  
  54. color: #fff;
  55. background: #DD4D42;
  56.  
  57. -webkit-transform-origin: 50% 0%;
  58. -moz-transform-origin: 50% 0%;
  59. -ms-transform-origin: 50% 0%;
  60.  
  61. -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  62. -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  63. -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
  64. }
  65.  
  66.  
  67. ---------------
  68.  
  69. <!-- Companion HTML to make the CSS3 Roll Links work -->
  70.  
  71. <p><a class="roll-link" href="http://www.domain.com/"><span data-title="Click the link!">Click the link!</span></a></p>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.