見出し画像

CSSで遊ぶ-回転する立方体

waiting4ufo

今回はCSSで下記のような回転する立方体を作ってみます。

画像1

実際の回転効果については下記のページをご覧ください。

CSSとHTMLの作成はVisual Studio Code（略称：VSCode）というIDEを使います。

１．立方体の各面に使う画像を用意

立方体は面が６つあるので、下記のように幅：200px、高さ：200pxの正方形画像を６つ用意します。

画像2

画像の大きさは作りたい立方体の大きさによって変更しても構いません。

２．VSCodeで開発環境を構築

①まずは作業場所（ディレクトリ）を決めておきます。
　例： D:\temp\playWithCSS　というディレクトリを作成

画像3

②事前準備した静的資材をコピーします。
　今回は事前に準備した資材は画像しかないので、１で用意した画像をコピーしておきます。

　例： image\200_200　というディレクト配下に画像を配置

画像4

③下記のアイコンをクリックし、VSCを開きます。

画像5

画像6

④下記のように、作業場所（ディレクトリ）を開きます。

画像7

下記のように、指定ディレクトリが開かれます。

画像8

これでHTMLとCSSを開発するVSCodeの環境構築が完了です。

３．HTMLとCSSファイルを作成

page001.htmlとpage001.cssを作成し、page001.htmlにcssを適用させます。

CSSは別のファイルに記述し、HTMLに適用させるのが一般的なやり方なので、今回はcssというディレクトリを作成し、その配下にpage001.cssを作成します。

htmlファイルとcssファイルを新規作成した画面は下記ようになります。

画像9

■page001.htmlに基礎コードを記述

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>play with CSS</title>

   <link rel="stylesheet" type="text/css" href="css/page001.css" />
</head>
<body>
   

</body>
</html>
<link rel="stylesheet" type="text/css" href="css/page001.css" /> で、page001.cssを適用しています。これで、cssファイルに記述した効果がhtmlに反映されるようになります。

４．立方体の作成・回転

① page001.htmlソース

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>play with CSS</title>

   <link rel="stylesheet" type="text/css" href="css/page001.css" />
</head>
<body>
   
   <!--画像を格納する容器を定義-->
   <div class="cube">

       <!--画像導入-->
       <div class="box1">
           <img src="image/200_200/1001.png">
       </div>

       <div class="box2">
           <img src="image/200_200/1002.png">
       </div>

       <div class="box3">
           <img src="image/200_200/1003.png">
       </div>

       <div class="box4">
           <img src="image/200_200/1004.png">
       </div>

       <div class="box5">
           <img src="image/200_200/1005.png">
       </div>

       <div class="box6">
           <img src="image/200_200/1006.png">
       </div>

   </div>
</body>
</html>

全体的に「cube」というクラスを適用しているdivを作成し、その中に各々の面を定義しています。

② page001.cssソース

■抜粋１

html{
   perspective: 800px;
}

立体オブジェクト（立方体）を作成し回転させるので、3次元のステージが必要になるので、必要な設定になります。（詳しくはグーグル先生に聞いたほうがよいでしょう）

■抜粋２

.cube{
   width: 200px;
   height: 200px;
   margin: 100px auto;

   transform-style: preserve-3d;
   animation: rotate 10s infinite linear;
}

立方体全体の設定です。自分が用意した各面の画像のサイズに合わせて、width, heightの値を変更してください。

transform-style: preserve-3d　：3次元で回転させるために必要な設定です。（この設定がないと、回転しても2次元画像にしかなりません）

animation: rotate 10s infinite linear：回転処理の定義です。10秒で定義した動きを完了させ、さらに infiniteで動きを無限ループするように指定しています。

■抜粋３

.cube > div{
   width: 200px;
   height: 200px;

   /*透明効果*/
   opacity: 0.7;
   position: absolute;
}

立方体の各面についての共通的な定義になります。

使ってる画像の実際の大きさによって、width, heightを変更してください。

opacity: 0.7　：回転するとき、手前の面によって隠れている後ろの面も見えるようにするための設定です。

■抜粋４

.box1{
   transform: rotateY(90deg) translateZ(100px);
}

...

それぞれの面を作成しています。

rotateY(90deg)：Y軸を中心に90度回転する
translateZ(100px)：Z軸に沿って100pxだけ移動させる

詳しくはCSS関連知識を検索してみてください。

■抜粋５

@keyframes rotate{
   from{
       transform: rotateX(0) rotateZ(0);
   }

   to{
       transform: rotateX(1turn) rotateZ(1turn);
   }
}

「rotate」という名前の動作キーフレームを定義しています。

from{} は動作開始時点の状態定義で、 to{}は動作終了時点の状態の定義になります。

■page001.cssソース全体

html{
   perspective: 800px;
}

.cube{
   width: 200px;
   height: 200px;
   /*background-color: #bfa;*/
   margin: 100px auto;

   transform-style: preserve-3d;
   animation: rotate 10s infinite linear;
}

.cube > div{
   width: 200px;
   height: 200px;

   /*透明効果*/
   opacity: 0.7;
   position: absolute;
}

img{
   vertical-align: top;
}

.box1{
   transform: rotateY(90deg) translateZ(100px);
}

.box2{
   transform: rotateY(-90deg) translateZ(100px);
}

.box3{
   transform: rotateX(90deg) translateZ(100px);
}

.box4{
   transform: rotateX(-90deg) translateZ(100px);
}

.box5{
   transform: rotateY(180deg) translateZ(100px);
}

.box6{
   transform: rotateY(0deg) translateZ(100px);
}

@keyframes rotate{
   from{
       transform: rotateX(0) rotateZ(0);
   }

   to{
       transform: rotateX(1turn) rotateZ(1turn);
   }
}

これで、回転する立方体の作成が完了しました。

まとめ

今回は遊ぶという感じで、動いてる3次元のオブジェクトのようなものを作成する方法について解説しました。

実際の3次元オブジェクトではなく、あくまでも面をX(横線）、Y(縦線)、Z(スクリーンから手前に向く線)軸に沿って回転、移動させるのにすぎません。

画像10

3次元で考えるX軸、Y軸、Z軸のイメージ

y軸の方向が数学で表記する座標系と逆（下向きが正方向）になっているので注意。

CSSは、一般的にはホームーページの見た目を定義するもので、本文で解説した3次元のようなものはあんまり作らないので、実際の開発現場ではあんまり使わないですが、「CSSでこんなものも作れるんだ。。。」程度の認識で構いません。

では、バイバイ！　Have a nice day!

この記事が気に入ったらサポートをしてみませんか？