css - 使用 CSS 的卡片滑动/翻转效果

Question

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

Answer 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/