Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/11/02 (木)

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

| 16:13 | カードをくるんとめくるよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - カードをくるんとめくるよ! - 雪乃☆雫のなでしこ日和 カードをくるんとめくるよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

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

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

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

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

 フェードの時と同様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

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

ゲスト



トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20171102