【CSS】立体的な四角形が回転する3Dアニメーション

こんにちは、Ryohei（@ityryohei）です！

本記事では、CSSで立体的な四角形の作り方と、四角形が回転する3Dアニメーションの作成方法をご紹介しています。

立体的な四角形を作成して回転させるにはどうすればいいんだろう？

上記の疑問にお答えします。

では、解説していきます。

四角形の面の要素を作成する

四角形を作成するための6つの面を用意します。面にはそれぞれユニークなclassを付けておき、独自のスタイルが指定できるようにしておきます。

HTML

<div class="cube">
    <div class="cube__face front">front</div>
    <div class="cube__face back">back</div>
    <div class="cube__face top">top</div>
    <div class="cube__face right">right</div>
    <div class="cube__face bottom">bottom</div>
    <div class="cube__face left">left</div>
</div>

CSS（SCSS）

.cube {
    width: 100%;
    height: 100%;
    
    &__face {
        width: 200px;
        height: 200px;
        
        &.front  { background: red; }
        &.back { background: green; }
        &.top { background: pink; }
        &.right { background: blue; }
        &.bottom { background: olive; }
        &.left { background: yellow; }
    }
}

上記HTML・CSSを実行すると、下記のような表示になります。

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

デモでは埋め込み範囲の削減のためにflexを当てて横並びにしています。実際には縦にずらっと要素が表示されます。

四角形の面を配置する

前項で作成した四角形の面を四角形の形になるように配置します。配置位置の調整にはtransformのrotateYとtranslateZを使用します。その他、面を立体的に配置するには下記のプロパティを指定する必要があります。

transform-style

プロパティを指定した要素の子要素を2Dもしくは3D空間に配置するかを設定します。
キーワード値：flat、preserve-3d

本記事では.cubeの子要素を3D空間に配置したいため、.cubeにtransform-styleを指定します。

HTML

<div class="scene">
    <div class="cube">
        <div class="cube__face front">front</div>
        <div class="cube__face back">back</div>
        <div class="cube__face top">top</div>
        <div class="cube__face right">right</div>
        <div class="cube__face bottom">bottom</div>
        <div class="cube__face left">left</div>
    </div>
</div>

CSS（SCSS）

.scene {;
    width: 200px;
    height: 200px;
    perspective: 600px;
}

.cube {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    
    &__face {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        opacity: .7;
        
        &.front  {
            background: red;
            transform: rotateY(0deg) translateZ(100px);
        }
        
        &.back {
            background: green;
            transform: rotateY(180deg) translateZ(100px);
        }
        
        &.top {
            background: pink;
            transform: rotateX( 90deg) translateZ(100px);
        }
        
        &.right {
            background: blue;
            transform: rotateY( 90deg) translateZ(100px);
        }
        
        &.bottom {
            background: olive;
            transform: rotateX(-90deg) translateZ(100px);
        }
        
        &.left {
            background: yellow;
            transform: rotateY(-90deg) translateZ(100px);
        }
    }
}

作成したHTMLに上記スタイルをあてると、下記の立体的な四角形が表示されます。

See the Pen 7778-2 by ryohei (@intotheprogram) on CodePen.

作成した四角形に簡単な回転アニメーションをつけていきます。

四角形に回転アニメーションを付ける

animationで四角形がくるくる回るアニメーションを付けていきます。立体的な四角形を活かすためにrotate3dで要素を回転させてみます。

CSS（SCSS）

@keyframes rotating {
  from {
    transform: rotate3d(.5, .5, .5, 360deg);
  }
  to{
    transform: rotate3d(0deg);
  }
}

.cube {
    //省略
    animation: rotating 5s linear 0s infinite;
}

CSSを追加すると下記のように四角形が回転を始めます。

See the Pen 7778-2 by ryohei (@intotheprogram) on CodePen.

本記事では四角形に面に単色の背景をつけているだけですが、写真にしたり動画にしたりするとガラッと印象が変わりそうですね！