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

我在我的网站上的一个div和span标签中放置了几个链接，当鼠标悬停在这些链接上时，它们会以3d的方式翻转，以显示一条新消息。它工作正常，但我有一些问题。显示的文本有点模糊，我无法修复它，如果我包含的显示消息比我的链接文本长两个字符，它会将其截断而不是扩展。我认为这只发生在“溢出”声明中。有人吗

html：

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

---

编辑：我在我的网站上添加了链接。我看到它在chrome、safari和firefox中都可以在osx上运行。

我认为没有真正的解决方案，但现在，您可以使用

文本阴影

和

文本笔划

属性。（）

---

使用这种链接视图，他们也遇到了和我看到的相同的问题。遗憾的是，数据标题不是真实/真实文本，因此它总是模糊的（除非浏览器开发人员使用它），如果它比真实文本长，它总是会被剪切。

我认为没有真正的解决方案，但此时，您可以使用

文本阴影和
文本笔划
属性。（）

使用这种链接视图，他们也遇到了和我看到的相同的问题。遗憾的是，数据标题不是真实/真实文本，因此它总是模糊的（除非浏览器开发人员使用它），如果它比真实文本长，它总是会被剪切。
我以前用css做过类似的东西。相同的属性但不同的设置。希望它能解决你的模糊问题。这里是教程-

JSFIDLE上的演示-

然而，似乎没有办法在显示时减少额外的单词。
很久以前，我用css制作了类似的东西。相同的属性但不同的设置。希望它能解决你的模糊问题。这里是教程-

JSFIDLE上的演示-

然而，似乎没有办法在暴露时减少额外的单词。
我在Chrome中使用这段代码时遇到了问题。我将鼠标悬停在文本上，但下面没有消息。例如，你能在众多代码站点中的一个上创建一个演示吗？但是你有一个溢出隐藏声明！很抱歉，是的，由于不兼容问题，溢出声明后来被添加了…我的主要问题是文本模糊，但我猜没有什么可以做的。我在Chrome中运行此代码时遇到问题。我将鼠标悬停在文本上，但下面没有消息。例如，你能在众多代码站点中的一个上创建一个演示吗？但是你有一个溢出隐藏声明！很抱歉，是的，由于我遇到的不兼容问题，后来添加了溢出声明…我的主要问题是文本模糊，但我猜没有什么可以做的。所以基本上在我的理解中，生成内容（CSS）不会创建
textNode
，这可能是渲染问题的原因（在Firefox中）。现在只是“Firefox和IE 10将在伪元素上转换属性”当前的Chrome Canary（版本29.0.1508.3 Canary）不支持这种转换。是的，你很了解它，所以我们必须等到浏览器开发人员对此做些什么…所以我的理解基本上是生成内容（CSS）不创建
textNode
，这可能是导致渲染问题的原因（在Firefox中）。现在只是“Firefox和IE 10将在伪元素上转换属性”当前的Chrome Canary（版本29.0.1508.3 Canary）不支持这种转换。是的，你很了解它，所以我们必须等到浏览器开发人员对此做些什么。。。
/* 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 );
}