使用 CSS 的卡片滑动/翻转效果 [关闭]答案

【问题标题】：Card swipe/flip effect using CSS [closed]使用 CSS 的卡片滑动/翻转效果 [关闭]
【发布时间】：2013-10-12 13:18:40
【问题描述】：

我正试图弄清楚卡片刷卡/翻转效果是如何完成的，如本网站所示：http://catalystconference.com/（在“我们的收藏夹”和类似部分下）。这可以仅使用 CSS 完成吗？

【问题讨论】：

(1) 您实际尝试过什么？（2）如果你这样做，你会向我们展示你的代码吗？（最好是JSFiddle）
@Deekey 不要发布垃圾邮件以吸引人们注意您的回答。我们都可以看到你的答案。

【解决方案1】：

不要依赖文本缩进，因为它会强制浏览器实际呈现您指定的负空间。相反，请尝试使用绝对定位和左/上/下/右属性来帮助定位（并随后显示/隐藏）隐藏的窗格。

对于您的 HTML，我冒昧地在您的 <div> 中创建了两个窗格：一个可见的和一个隐藏的。

<div>
    <p class="pane-visible">Visible pane.</p>
    <p class="pane-hidden">Hidden pane.</p>
</div>

在 CSS 方面，可见窗格按原样定位，但隐藏窗格绝对定位（但相对于其父级），距离顶部 100%（因此位于父容器的底部，但不在视线）。诀窍是在父级悬停时更改隐藏窗格的top 属性，将其带到顶部。使用 CSS3 属性可以轻松完成动画：transition。

div {
    overflow: hidden;
    position: relative;
    width: 300px;
    height: 300px;
}
div > p[class|="pane"] {    /* Targets element with the class "pane-" (notice the dash) */
    box-sizing: border-box;    /* Forces width and height to be at 300px even with padding */
    padding: 1em;
    width: 300px;
    height: 300px;
}
    div > p[class*="hidden"] {
        position: absolute;
        top: 100%;
        left: 0;
        transition: all .25s ease-in-out; /* You might want to add vendor prefixes */
    }
        div:hover > p[class*="hidden"] {
            top: 0;
        }

这是我的概念验证小提琴：http://jsfiddle.net/teddyrised/TTv4q/2/

【讨论】：

完美！非常感谢@Terry！
@sigep23 如果有帮助，请接受答案:)