CSSでポケストップ的なものを作る

CSSでポケストップ的な動きを表現するその2。表面と裏面で異なる表示をする。

サンプルソース

HTML(body内のみ)

<div class="sample">
<div class="sample-front"></div>
<div class="sample-back"></div>
</div>

CSS

.sample {
position: relative;
width: 164px;
height: 164px;
transform-style: preserve-3d;
}
.sample-front {
position: absolute;
top: 0;
left: 0;
background-color: yellow;
height: 150px;
width: 150px;
border-radius: 50%;
border: 7px skyblue solid;
backface-visibility: hidden;
}
.sample-back {
position: absolute;
top: 0;
left: 0;
background-color: red;
height: 150px;
width: 150px;
border-radius: 50%;
border: 7px skyblue solid;
transform: rotateY(180deg);
backface-visibility: hidden;
}
.sample:hover {
animation-name: pokestop-rotate;
animation-duration: 1s;
}
@keyframes pokestop-rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}

解説

HTMLはsampleの配下に表面と裏面の要素を配置します。

<div class="sample">
<div class="sample-front"></div>
<div class="sample-back"></div>
</div>

続いてCSS。表面と裏面はposition: absoluteを指定して同じ位置に重ねるので、親要素にはposition: relativeを指定します。
また、transform-style: preserve-3d;を親要素に指定しておくことで3D的な表示が可能になります。

.sample {
position: relative;
width: 164px;
height: 164px;
transform-style: preserve-3d;
}

表面の設定は簡単で、以下のポイントさえ押さえていれば大丈夫です。

  • 裏面と同じ位置に配置する(position: absoluteで指定)
  • 裏面と同じサイズにする(widthheightで指定)
  • 裏面を表示しない(backface-visibility: hiddenを設定することで回転した際に裏面が表示されなくなる)

表面と裏面のデザインは好きに変えてください。

.sample-front {
position: absolute;
top: 0;
left: 0;
background-color: yellow;
height: 150px;
width: 150px;
border-radius: 50%;
border: 7px skyblue solid;
backface-visibility: hidden;
}

裏面についても表面とほぼ同じですが、一つだけ設定を追加します。
transform: rotateY(180deg);を設定して180度回転した(裏を表示)状態にしておきます。
backface-visibility: hiddenが効いているので裏は表示されず、初期状態では非表示になります。

.sample-back {
position: absolute;
top: 0;
left: 0;
background-color: red;
height: 150px;
width: 150px;
border-radius: 50%;
border: 7px skyblue solid;
transform: rotateY(180deg);
backface-visibility: hidden;
}

ここから動き(回転)の部分です。
親要素にマウスオーバーされたときに回転するアニメーションを設定します。
親要素が回転することで、小要素である表面と裏面も一緒に回ります。

.sample:hover {
animation-name: pokestop-rotate;
animation-duration: 1s;
}

今回は1秒で360度回転するように設定しました。
ここらへんも好きなように変えて大丈夫です。

@keyframes pokestop-rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}

以上で完了です。まとめると…
同じ位置に同じ大きさの要素が重なっている。
それぞれの要素は回転時に裏側を表示しない。
裏面の要素は最初から裏側を向けているので表示されていない。
親要素が回転することで小要素である表面と裏面も同時に回転し、表裏が入れ替わる。

おしまい。