Question

我在div和span标签中放置了几个链接，当它们悬停在它们上面时，它们会以3d查看方式翻转以显示新消息。 Look here and roll over the link in the first paragraph of text。它工作正常，但我有一些问题。显示的文字有点模糊，我无法解决它，如果我包含一个比几个字符更长的揭示消息然后我的链接文本切断它而不是扩展它。我以为这只发生在“溢出”声明中。任何想法？

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 );
}

编辑：我在我的网站上添加了链接到here is the mark up to mess with。我看到它在chrome，safari和firefox上运行都在osx上运行。

Answer 1

我认为没有真正的解决方案，但此时，您可以使用text-shadow和text-stroke属性。（some help for the stroke）。

Webdesignerdepot也使用这种链接视图，他们遇到的问题与我看到的相同。遗憾的是，数据标题不是真实/真实的文本，所以它总是模糊不清（除非浏览器开发人员用它做什么），如果它比实际文本更长，它将永远被剪切。

Answer 2

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

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

但是，似乎没有解决方案来减少额外的言论。

CSS3 HTML5交叉浏览器对悬停链接的3D翻转效果

2 个答案: