【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を当てて横並びにしています。実際には縦にずらっと要素が表示されます。

四角形の面を配置する

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

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

本記事では.cubeの子要素を3D空間に配置したいため、.cubetransform-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.

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

最後に

本記事では四角形が回転するアニメーションの作り方をご紹介してきましたが、マウスオーバー時に四角形が展開したり、色が変わったりするギミックを入れても面白そうですね。3Dならではのアニメーションを考えていきたいところですね。面白いアイデアはどんどん投稿していきたいと思います!

以上、CSSで立体的な四角形が回転する3Dアニメーションのご紹介でした!

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら