知ってた？ナルホド！
こんにちは！コーダーの平原です！
CSSには、プログラムを書かなくても動的なUIを実装してくれるプロパティが存在します。
使用方法は簡単で、尚且つ少ないコードで実装が可能な為、パフォーマンスが高くとても重宝しています。
今回はそんなプロパティを組み合わせて作成した、「3D空間で回転するカード」の実装方法をご紹介します。
1. 3D空間で回転するカード
こちらが今回作成した「3D空間で回転するカード」です。
男の子のカードにカーソルを当てると、カードが回転し、裏側のカードが表示されます。
スマートフォンの場合は、タップ操作で裏側のカードが表示されますが、
表側のカードに返す際には、カード以外の箇所(水色の背景)を一度タップしてください。
それでは今回使用したプロパティについてご説明します。
2. transform
transformプロパティは、指定した要素を回転させたり、拡大縮小や傾斜、移動させることができるプロパティです。
今回使用した「rotate」関数の「rotateY」では、Y軸を軸とする角度によって、時計回りの回転を指定することができます。
指定方法は以下の通りです。
transform: rotateY(180deg);3. transform-style
transform-styleプロパティは、指定した要素の子要素を、3D空間に配置するか、平面化して要素の平面に配置するかを設定することができるプロパティです。
今回使用した「preserve-3d」では、3D空間の配置を指定することができます。
指定方法は以下の通りです。
transform-style: preserve-3d;4. transition
transitionプロパティは、指定した要素の時間的な変化を設定することができるプロパティです。
transition-property、transition-duration、transition-timing-function、transition-delayプロパティを一括指定することができます。
今回は、「transform」を「0.5s(0.5秒)」かけて完了させる為、以下のように指定しました。
transition: transform 0.5s;5. backface-visibility
backface-visibilityプロパティは、指定した要素がユーザーに対して裏側を向いたときに、裏面を表示するかどうかを設定することができるプロパティです。
今回は、男の子と女の子、2つのカードの表面のみ表示させる為、値を「hidden」に指定しています。
backface-visibility: hidden;尚、iOSのsafariに対応させる為にベンダープレフィックスも指定しています。
-webkit-backface-visibility: hidden;6. まとめ
今回ご紹介したCSSのプロパティは、その特徴を理解して組み合わせることで、CSSのみで要素のパフォーマンスを上げることができます。
ちなみに、動的なUIを実現する為のCSSのプロパティは、GPU(Graphics Processing Unit)での処理となる為、処理の負荷が軽いというメリットもあるようです。
次回は、そんなGPUとCPUについてご紹介したいと思います！
