フリップするカードを作ってみた

steelydylan

アップルップルで働くマークアップエンジニア
趣味はマークアップと、英語とディスクゴルフです。
ゲームのライブラリなんかも作ったりしています。

今回は、フリップするカードを作ってみたいと思い、上のようなデモを作ってみました。
マウスをホバーしてみてください。カードが裏返ったはずです。
作り方を説明していきたいと思います。

HTML

<section class="container102">
  <div id="card102">
    <figure class="front102"></figure>
    <figure class="back102">
        <p>steelydylan</p>
        <p>アップルップルで働くマークアップエンジニア<br/>
              趣味はマークアップと、英語とディスクゴルフです。<br/>
              ゲームのライブラリなんかも作ったりしています。
        </p>
    </figure>
  </div>
</section>

CSS

.container102 {
  width: 460px;
  height: 460px;
  position: relative;
  margin: 0 auto 40px;
  border: 1px solid #CCC;
  -webkit-perspective: 800px;
     -moz-perspective: 800px;
       -o-perspective: 800px;
          perspective: 800px;
}

#card102 {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
     -moz-transition: -moz-transform 1s;
       -o-transition: -o-transform 1s;
          transition: transform 1s;
  -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
     -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
}

#card102.flipped {
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );
       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
}

.front102,
.back102 {
  margin:0;
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
}

.front102 {
  background-image:url(https://avatars.githubusercontent.com/u/2508691?);
}

.back102 {
  background: #008CBA;
  -webkit-transform: rotateY( 180deg );
     -moz-transform: rotateY( 180deg );
       -o-transform: rotateY( 180deg );
          transform: rotateY( 180deg );
  color:#FFFFFF;
  font-size:15px;
  padding:20px;
}

見慣れないCSSが多々ありますので意味を解説していきます

perspective

transformの際の奥行きを表します。x,y,zz軸と考えたらいいですね。

transform-style

このプロパティを指定した要素の子要素が、 3D空間の中でフラットに(平らに)描画されるか、立体的に描画されるかを指定する際に使用します。

backface-visibility

要素が裏返った時に表示するか、非表示にするかを決められます。

つまり、transitionで.front102が回転して裏向きになり非表示になり、代わりに裏向きだった.back102が表向きになり、表示されるということです。

transform:rotateY( 180deg );

要素を180度Y軸に対して回転させて表示します。

jQuery

$("#card102").hover(function(){
    $(this).toggleClass("flipped");
},
function(){
    $(this).toggleClass("flipped");
});

マウスオーバーやマウスアウト時に#card102flippedというクラスを追加したり取り除いたりするだけでかまいません。

感想

3Dを実装するのもCSSのプロパティすら知っておけば気軽に試せるので、どんどん試していきたいと思います。

参考



堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →