wordpress - 让超链接在矩形框中以#3D 变换方式垂直滚动

Question

我正在尝试让滚动的超链接(就像你在床上，从一侧滚动到另一侧)在一个矩形框中。我在 WordPress 域上有以下内容:

.entry-content a {
background: #28A2EE;
text-decoration: none;
color: #fff;
border-radius: 4px;
}
.entry-content a:hover {
background: #3a599d;
text-decoration: none;
color: #fff;
border-radius: 4px;
transform: rotateX(180deg) scale(1.05) translateY(-22px);
    transition: background 0.3s ease 0s;
}

这是 JSFiddle AlienArrays 创建的是为了重现我所看到的。此外，您还可以看到 Privacy Policy page至于上面的 CSS 输出了什么。但同样，我希望链接是在悬停时垂直翻转或翻转的矩形框。

我认为这会翻转超链接，但我知道我必须以某种方式放置某种类型的 transform: 3D 类型的 CSS。我只是不知道怎么办。

我是 Code Canyon 迷，所以示例 2 来自那里，但他的附加组件在 IE(任何版本)中不起作用。

Example 1 (这是我正在尝试做的确切示例!此示例中显示的第二层链接!)

Example 2 (来自 Code Canyon；在 IE 中不起作用)

Example 3 (德国网站在他的链接上有它；在 IE 中不起作用)

这是一个 WordPress 网站，所以我不想把它弄得太复杂。是否可以调整以上内容以实现我正在寻找的翻转效果？ 任何指导将不胜感激!

Answer 1

这是一个例子 http://jsfiddle.net/TgCJs/2/

这是我添加的。

.entry-content:hover  {
    animation: myAnimateName 10s;
    display: inline-block;   // didn't work till added this
}

@keyframes myAnimateName {
    0% { transform: none; }
    100% { transform: rotatex(180deg); }
}

这是获取更多信息的 OK 资源 http://www.w3schools.com/css/css3_animations.asp

编辑:也只是添加 display: inline-block 似乎使原来的 fiddle http://jsfiddle.net/TgCJs按你想要的方式工作。尽管有一些问题需要解决。可能添加 <li></li>每个 <a></a> 周围的标签标记并使用伪 li:hover a css 选择器会有所帮助。