body{font-family:sans-serif;font-size:36px;padding:20px;text-align:center;} /********************************************* * ROLLING LINKS *********************************************/ #reveal .roll { display: inline-block; /* give it a layout */ overflow: hidden; vertical-align: top; /* just to be sure */ /* * The smaller the number the closer you look at this <a> element */ -webkit-perspective: 400px; -moz-perspective: 400px; -ms-perspective: 400px; perspective: 400px; /* * Relative position of the POV * Default is 50% 50% so not necessary */ -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } #reveal .roll:hover { background: none; text-shadow: none; } #reveal .roll span { display: block; /* give it a layout */ position: relative; padding: 0 2px; pointer-events: none; /* duration */ -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; transition: all 400ms ease; -webkit-transform-origin: 50% 0%; /* posx posy */ -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; /* * CSS3 transform-style explained here: * http://www.webkit.org/blog-files/3d-transforms/transform-style.html */ } #reveal .roll:hover span { background: rgba(0,0,0,0.5); -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); } /* ======================= */ /* = Face after rotation = */ /* ======================= */ #reveal .roll span:after { content: attr(data-title); display: block; /* maybe its not necessary */ position: absolute; /* position over <a> */ left: 0; top: 0; padding: 0 2px; /* nothing functional, just right, left space */ color: #fff; background: hsl(185, 60%, 35%); -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; /* * translate3d => move up element to the top * rotateX => rotate till hidden */ -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); }
<div id="reveal"> <a href="http://html5boilerplate.com/docs/Build-script/" class=" roll"> <span data-title="H5BP build script">H5BP build script</span> </a> </div>