使用 CSS3 和 JavaScript 制作链接反转 3D 动画，CSS 和 JavaScript 技巧用来创建顶层的悬浮效果，使用 transfomr-origin 和 transform-style 属性及其 3D 属性。

CSS 代码

.roll {

display: inline-block;

overflow: hidden;

vertical-align: top;

-webkit-perspective: 400px;

-moz-perspective: 400px;

-webkit-perspective-origin: 50% 50%;

-moz-perspective-origin: 50% 50%;

}

.roll span {

display: block;

position: relative;

padding: 0 2px;

-webkit-transition: all 400ms ease;

-moz-transition: all 400ms ease;

-webkit-transform-origin: 50% 0%;

-moz-transform-origin: 50% 0%;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

}

.roll:hover span {

background: #111;

-webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);

-moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);

}

.roll span:after {

content: attr(data-title);

display: block;

position: absolute;

left: 0;

top: 0;

padding: 0 2px;

color: #fff;

background: hsl(206, 80%, 30%);

-webkit-transform-origin: 50% 0%;

-moz-transform-origin: 50% 0%;

-webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);

-moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);

}

JavaScript 代码

var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined ||

document.body.style['MozPerspective'] !== undefined;

function linkify( selector ) {

if( supports3DTransforms ) {

var nodes = document.querySelectorAll( selector );

for( var i = 0, len = nodes.length; i < len; i++ ) {

var node = nodes[i];

if( !node.className || !node.className.match( /roll/g ) ) {

node.className += ' roll';

node.innerHTML = '' + node.innerHTML + '';

}

};

}

}

linkify( 'a' );