使用CSS刷卡/翻转效果

时间:2013-10-12 13:18:41

标签: css3 css-transitions

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

1 个答案:

答案 0 :(得分:1)

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

对于您的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/