cssを使って立方体をぐるぐる回してみた。

cssを使って立方体をぐるぐる回してみた。

立方体を回転させてほしいと要望があったので試作品を作りました。がその後ぼつになったので試行錯誤を無駄にしないために共有としてブログに残しておきます。

デモでは追加で回転のスピードを変化させられるようにしています。

デモはこちら

https://try.timeair.jp/cube/

 

コードの解説

html

<div class="cube">
    <div class="cube__surface cube__surface--no1"></div>
    <div class="cube__surface cube__surface--no2"></div>
    <div class="cube__surface cube__surface--no3"></div>
    <div class="cube__surface cube__surface--no4"></div>
    <div class="cube__surface cube__surface--no5"></div>
    <div class="cube__surface cube__surface--no6"></div>
</div>
scss

$size: 200px;
.wap {
position: relative;
top: 100px;
perspective: 500;
}

.cube {
width: $size;
height: $size;
position: relative;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(45deg) rotateZ(0deg);
animation-name: kaiten;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
img {
width: 100%;
}
&__surface {
width: $size;
height: $size;
position: absolute;
box-sizing: border-box;
&--no1 {
transform: rotateX(90deg) translateZ($size/2);
background-color: rgba(234, 85, 50, 0.6);
}
&--no2 {
transform: rotateX(90deg) translateZ(-$size/2);
background-color: rgba(170, 207, 82, 0.6);
}
&--no3 {
transform: translateZ($size/2);
background-color: rgba(24, 127, 196, 0.6);
}
&--no4 {
transform: translateZ(-$size/2);
background-color: rgba(255, 243, 63, 0.6);
}
&--no5 {
transform: rotateY(90deg) translateZ($size/2);
background-color: rgba(233, 84, 107, 0.6);
}
&--no6 {
transform: rotateY(90deg) translateZ(-$size/2);
background-color: rgba(0, 169, 95, 0.6);
}
}
}

@keyframes kaiten {
0% {
transform: rotateX(-20deg) rotateY(45deg) rotateZ(0deg);
}
100% {
transform: rotateX(-20deg) rotateY(-315deg) rotateZ(0deg);
}
}

立方体を作るのは他のブログでも解説があるので端折ります。

この記事ではきれいに回転させるためのポイントを解説します。

ポイントは以下の2点です。

ポイント1 XYZを別々に指定して回転以外の状態を揃える
ポイント2 変化ごと変化前の総和を360にするときれいに回転がつながって見える

立方体をきれいに回すポイントは回転以外の傾きを揃えることが必要でXYZすべてを個別に指定してあげるとうまくいきました。つまりrotate3dではうまくいきません。

今回はrotteYで角が正面になるように回しています。

そしてrotateXで手前にむかって傾けています。

.cube

transform: rotateX(-20deg) rotateY(45deg) rotateZ(0deg);
keyframes

0% {
transform: rotateX(-20deg) rotateY(45deg) rotateZ(0deg);
}
100% {
transform: rotateX(-20deg) rotateY(-315deg) rotateZ(0deg);
}

またきれいに変化前と変化後をつなげるためには変化前と変化後の総和が360になる必要があります。
つまり開始のrotateYと終了のrotateYが45+315で360になっています。

今回は行っていませんが乱回転ぽくするためには変化後のrotateZに360を入れてあげるとカクカクならずにきれいに乱回転ぽくなります。

回転させるときに頭がこんがらがって時間がかかってしまったので参考になれば幸いです。

PS.デモサイトでスピードを0.1まで早くすると洗濯機もびっくりなくらい早く回ります。

関連記事

engage