CSS カードをめくる動きを再現する方法
公開日
by
CSS でカードをめくる動きを再現する方法を紹介します。
ベースのコードを紹介
CSSでカードをめくるような動きを再現する方法を紹介します。
いくつかポイントがありますので順を追って説明します。
まずは最初に、動きのサンプルとベースのコードを紹介します。
その場でめくれる動き
その場でめくれる動きのサンプルです。カードにカーソルを合わせてボタンを押し下げたときに動作します。
ベースの HTML はこちら。
<div class="flip">
<div class="front"></div>
<div class="back"></div>
</div>
めくれると大きくなる動き
その場でめくれると大きくなる動きのサンプルです。カードにカーソルを合わせてボタンを押し下げたときに動作します。
ベースの HTML はこちら。
<div class="fli zoomp">
<div class="front"></div>
<div class="back"></div>
</div>
それぞれのベースの CSS はこちら。
.flip,
.flip *,
.flip *:focus {
outline:none;
}
.flip {
position: relative;
display: block;
width: 320px;
height: 320px;
margin: 20px;
perspective: 800px; /* 子要素が変形する場合に、親要素に3D変形の奥行きの深さを指定 */
}
.flip:hover {
cursor: pointer;
}
.flip .front,
.flip .back {
position: absolute;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 10px;
transform-style: preserve-3d; /* preserve-3d で要素が立体的に描画されるように指定 */
backface-visibility: hidden; /* 裏返した時に要素を隠す */
transition: all .4s ease-in; /* 変化のアニメーションを指定 */
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: #79885d;
}
.flip .front {
transform: rotateY(0) scale(1, 1); /* 表示 */
}
.flip .back {
transform: rotateY(180deg) scale(1, 1); /* 裏返し */
}
.flip:active .front {
transform: rotateY(180deg); /* 裏返し */
}
.flip:active .back {
transform: rotateY(360deg); /* 表示 */
}
.flip > duv {
pointer-events: none; /**/
}
クラス.zoom を加えてめくれるタイミングで拡大する場合はこちらを追加してください。
.flip:active.zoom .front {
transform: rotateY(180deg) scale(1.5, 1.5); /* 裏返し */
transition: all .4s ease-in;
}
.flip:active.zoom .back {
transform: rotateY(360deg) scale(1.5, 1.5); /* 表示 */
transition: all .4s ease-in;
}
コードの解説
紹介したコードを解説します。
.flip,
.flip *,
.flip *:focus {
outline:none;
}
outline:none; を指定して対象要素のアウトラインを非表示にします。
.flip {
position: relative;
display: block;
width: 320px;
height: 320px;
margin: 20px;
perspective: 800px; /* 子要素が変形する場合に、親要素に3D変形の奥行きの深さを指定 */
}
フリップのサイズを指定します。回転する要素は小要素になるので、親要素に perspective を指定して奥行きの指定を行います。
.flip:hover {
cursor: pointer;
}
アクションのタイミングは active を利用しますが、マウスが hover したタイミングでカーソルが変わるようにします。
.flip .front,
.flip .back {
position: absolute;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 10px;
transform-style: preserve-3d; /* preserve-3d で要素が立体的に描画されるように指定 */
backface-visibility: hidden; /* 裏返した時に要素を隠す */
transition: all .4s ease-in; /* 変化のアニメーションを指定 */
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: #79885d;
}
transform-style で立体的な動きをするように指定。backface-visibility で裏返った要素を非表示します。
.flip .front {
transform: rotateY(0) scale(1, 1); /* 表示 */
}
.flip .back {
transform: rotateY(180deg) scale(1, 1); /* 裏返し */
}
回転する角度を指定。今回は裏返るので 180deg を指定。
.flip:active .front {
transform: rotateY(180deg); /* 裏返し */
}
.flip:active .back {
transform: rotateY(360deg); /* 表示 */
}
active 時の回転角度を指定。
.flip > duv {
pointer-events: none; /**/
}
子要素のクリックイベントを禁止。
.flip:active.zoom .front {
transform: rotateY(180deg) scale(1.5, 1.5); /* 裏返し */
transition: all .4s ease-in;
}
.flip:active.zoom .back {
transform: rotateY(360deg) scale(1.5, 1.5); /* 表示 */
transition: all .4s ease-in;
}
拡大表現する場合は scale の値を変更してください。
スマホ対策
スマートフォンで動きを再現する場合に、思った動きをしない場合は、body に ontouchstart=”” を追加します。
<body ontouchstart="">
まとめ
CSS でカードをめくる動きを再現する方法を紹介しました。
