-1

このサイトで見られるように、カードのスワイプ/フリップ効果がどのように行われたかを理解しようとしています: http://catalystconference.com/ (「私たちのお気に入り」および同様のセクションの下)。これは CSS だけで実現できますか?

4

1 に答える 1

1

text-indent に依存しないでください。指定したネガティブ スペースを実際にブラウザーにレンダリングさせるためです。代わりに、絶対配置と左/上/下/右のプロパティを使用して、非表示のペインを配置 (および表示/非表示) できるようにしてください。

あなたの HTML のために、私は自由に 2 つのペインを作成しました<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/

于 2013-10-12T15:06:27.227 に答える