雪乃☆雫のなでしこ日和

カードをくるんとめくるよ！

なでしこ３ | 16:13 |

　またちょっと、CSSのエフェクト系です。

　transform:rotateY()を使って、カードをくるんとめくります。

　これは要素を回転表示するヤツで、()に与えた角度によってY軸を軸にして時計回りに回転します。

　裏返した状態の表と、裏のカードを重ねて置いて、同時に回転させることで１枚のカードがひっくり返ったように見せるとゆう技なんですね～。

　フェードの時と同様transitionで、何秒掛けて回転させるかを指定します。

　backface-visibilityは要素の裏面を見れるようにするかどうかを指定するヤツで、これはhiddenにしておかないと、裏返っても裏返った状態の裏のカード（ややこやしい；）が見えていて、表のカードが見えないとゆうことになってしまいます。

　もうひとつ、perspectiveは3D変形の奥行きの深さを指定する・・ヤツで、ようするに立体感が出ます。これが無いと中心線に向けてぎゅっと縮んでまた伸びたのと同じ感じになっちゃうんですね。

　・・・でっ、こんな感じ～。

　波カッコ閉じが無事に使えるようになったおかげで、スタイルシートをDOM_HTML設定するのがとても楽になりました。ありがたや～☆

<script type="なでしこ">
＃クリックして、カードの表を開く。

「#ura」の「onclick」に「カード開」をDOMイベント設定。
「#omote」の「onclick」に「カード閉」をDOMイベント設定。

#時計回りに裏を180度、同時に表も(-180から0なので)180度回転させて、表を出す。
●カード開
　　開閉＝「
#ura{波カッコ}transform: rotateY(180deg);{波カッコ閉じ}
#omote{波カッコ}transform: rotateY(0);{波カッコ閉じ}」
　　「#style」に開閉をDOM_HTML設定。
ここまで。

#同様に反時計回りに180度、裏表同時に回転させて裏返す。
●カード閉
　　開閉＝「
#ura{波カッコ}transform: rotateY(0);{波カッコ閉じ}
#omote{波カッコ}transform: rotateY(-180deg);{波カッコ閉じ}」
　　「#style」に開閉をDOM_HTML設定。
ここまで。
#-----------------------------------------------------------------------
</script>

<style type="text/css">
<!--
#base {
  margin:auto;
  width: 70px;
  height: 90px;
}
#card {
  position: absolute;
  perspective: 1000px;    /* 奥行きの深さ。プロパティを指定した要素自身ではなく、その子要素で位置や変形を指定されたものにだけ適用される。*/
}

#ura,
#omote {
  position: absolute;
  transition: transform 0.6s;    /* トランスフォームプロパティを0.6秒かけて変化させる*/
  backface-visibility: hidden;   /* 要素の裏面を不可視にする*/
}

#omote {
  transform: rotateY(-180deg);   /* 要素をY軸を中心に裏返しておく設定*/
}
  -->
</style>


<style id="style"></style>

<div id="base">
  <div id="card">
    <img id="omote" src="http://www.geocities.jp/snowdrops890/image/card_omote.png">
    <img id="ura" src="http://www.geocities.jp/snowdrops890/image/card_ura.png">
  </div>
</div>

　できた～♪

http://www.geocities.jp/snowdrops890/wnako3_test/09_card_test.html

　こんなことが出来ると、カードゲームを作るのが楽しくなりそうですよね！（≧▽≦）

ツイートする