CSS3 HTML5跨浏览器3d翻转效果悬停链接

Question

我在我的网站上放置了几个链接，在div和span标签内，当鼠标悬停在它们上面时，它们会以3d的方式翻转，以显示新的消息。看这里，滚动文本第一段的链接。它工作正常，但我有一些问题。揭示的文本是有点模糊，我不能修复它，如果我包括一个揭示的消息是几个字符长然后我的链接文本它切断而不是扩展它。我以为这只发生在"溢出"声明中。的想法吗?

html:

<a href="/portfolio" title="View Our Portfolio" class="roll-link">
<span data-title="Check It Out ...">Our Portfolio</span></a>

CSS:

/* ROLL LINKS */
.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%;
text-decoration:underline;
}
.roll-link:hover {
text-decoration:none;
}
.roll-link 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-link:hover span {
background: #3887be;
-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: #fff;
background: #3887be;
-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 );
}

编辑:我在我的网站上添加了一个链接，这里是标记混乱。

Answer 1

我不认为有一个真正的解决方案，但在这个时候，你可以玩text-shadow和text-stroke属性。(给笔画一些帮助)。

Webdesignerdepot使用这种类型的链接视图也，他们得到了同样的问题，我看到。遗憾的是，data-title不是真正的文本，所以它总是模糊的(除非浏览器开发人员对它做些什么)，如果它比真正的文本长，它总是会被剪切。

Answer 2

我用css做了一些类似的东西。相同的属性但不同的设置。希望它能解决你模糊的问题。这里是教程- http://www.howtokickblogger.com/2012/11/post-links-hover-effect.html

jsFiddle演示- http://bit.ly/14AHwcc

然而，似乎没有解决方案来削减多余的单词在揭示。