CSS3 实现链接的 3D 效果

当鼠标划过链接的时候，链接的 Hover 效果如果是 3D 的翻转，是不是很不错呀？好吧，今天就教你如何实现。

HTML 结构：

<a href="#" class="roll-link">
    <span data-title="测试 3D 动画效果的链接">测试 3D 动画效果的链接</span>
</a>

CSS 样式：

.roll-link {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
}
.roll-link:hover {text-decoration:none;}
.roll-link span {
    display: block;
    position: relative;
    padding: 0 2px;
    color: #003253;
    -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-link:hover span {
    background: #065588;
    -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.roll-link span:after {
    content: attr(data-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;
    color: #f3f2ee;
    background: #065588;
    -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 );
}

假如你的链接是这样的：

<a href="#">这是一个没有内容的链接</a>

那么，其实你可以通过 javascript 动态更换样式和添加字元素来达到对所有链接的 3D 效果应用。使用 jQuery 的做法如下：

var linkArr = $("a");
for(var i = 0; i < linkArr.length; i ++) {
    var value = linkArr[i].text;
    $(linkArr[i]).addClass("roll-link");
    $(linkArr[i]).html("<span data-title='"+ value +"'>"+value+"</span>");
}

Ok，完成了，鼠标放到下面 DEMO 的地方，看看效果吧。

这里：CSS3 实现链接的 3D 效果

掌心

CSS3 实现链接的 3D 效果