《CSS》扉の開け方のような表現方法

こんな人に読んで欲しい！
・「アニメーション」についてをもっと知りたい人

こんにちは、「なゆた」です！
今日は皆さんに、「CSS」の「アニメーション」を通して、「扉の開け方のような表現方法」をお教えします！
作成方法については「アニメーション」についてとほぼ一緒ですが、一つだけ違います。

①まずはHTMLファイルです。入力するのは以下の通りです。クラス名は自由です。それが出来たら、CSSファイルと連携しましょう。

②連携したCSSファイルに移ったらまず、openクラスに手を加えます。transitionの時間は自由に設定して下さい。

③次に、hoverを加えます。ここからが肝心です！transformで、「rotateX」を入れます。「rotateX」とは、「横に回転する」ことを意味しています。この「rotateX」を、90度（deg）に設定します。すると・・・

④ご覧ください！カーソルを合わせたら、パカっと開きました！これで完成です！

いかがでしたか？まぁ・・・あんまり使うことはないでしょうが、たまに遊び心でやってみて下さい！
以上です、ありがとうございました！