刷卡/翻转效果使用CSS [英] Card swipe/flip effect using CSS

问题描述

我想弄清楚如何在此网站上看到刷卡/翻转效果： http：// catalystconference .com / （在我们的收藏和类似部分）。

I'm trying to figure out how the card swipe/flip effect was done as seen on this site: http://catalystconference.com/ (under the "Our Favorites" and similar sections). Can this be accomplished using only CSS?

推荐答案

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

Don't rely on text-indent, because it forces the browser to actually render the negative space that you have specified. Instead, try using absolute positioning and left/top/bottom/right properties to help position (and subsequently reveal/hide) your hidden pane.

自由在您的< div> 中创建两个窗格：可见和隐藏的窗格。

For your HTML, I have taken the liberty to create two panes in your <div>: a visible and a hidden one.

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

CSS明智的，可见窗格的位置是，但隐藏窗格是绝对定位到它的父级），它是从顶部100％（因此坐落在父容器的底部，但是看不见）。诀窍是更改隐藏窗格的 top 属性，当父级悬停时，将其放到顶部。动画很容易用CSS3属性完成： transition 。

CSS wise, the visible pane is positioned as is, but the hidden pane is positioned absolutely (but relative to its parent) that is 100% off from the top (therefore sits at the bottom of the parent container, but out of sight). The trick is to change the top property of the hidden pane when the parent is hovered, to bring it to the top. The animation is easily done with the CSS3 property: 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/

Here is my proof-of-concept fiddle: http://jsfiddle.net/teddyrised/TTv4q/2/

这篇关于刷卡/翻转效果使用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！