gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 14:06:27 24 4
gpt4 key购买 nike

我正在尝试让滚动的超链接(就像你在床上,从一侧滚动到另一侧)在一个矩形框中。我在 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 网站,所以我不想把它弄得太复杂。是否可以调整以上内容以实现我正在寻找的翻转效果? 任何指导将不胜感激!

最佳答案

这是一个例子 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 选择器会有所帮助。

关于wordpress - 让超链接在矩形框中以#3D 变换方式垂直滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21081722/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com