CSSだけで作る「回転する3Dバナー/ vol2 立体の箱を回転させる」(コピペOK)

今回は CSSで作った立体の箱を回転させる方法です。(箱の作り方は 「 CSSだけで作る「回転する3Dバナー/ vol1 立体の箱を作る 」を見てね )

HTMLは変更なし^^
親要素の CSSに、

1. アニメーションの設定をする
2. キーフレームを作成する

だけ。簡単に動きがつけられちゃうんです^^v

このページでは、アニメーションやキーフレームの設定方法と作り方、3D回転のバリエーションをそこそこ丁寧(?)にご案内します。

Demo

まずは基本形の動き。

黒線が親要素( ul )の位置。
この親要素の中心を基準点にして、子要素( li ) で作った立体が3D回転しているのが、わかると思います。

HTML

CSSアニメーションは「要素を動かすだけ」なので、要素自体を変更する必要はありません。

という訳で、まんま 「vol1 立体の箱を作る」のhtmlコード です^^

<div class="polyhedron-wrap">
  <ul class="polyhedron">
    <li class="face1"><span>1</span><br>正面</li>
    <li class="face2"><span>2</span><br>蓋</li>
    <li class="face3"><span>3</span><br>裏面</li>
    <li class="face4"><span>4</span><br>底</li>
    <li class="face5"><span>5</span><br>左</li>
    <li class="face6"><span>6</span><br>右</li>
  </ul>
</div>

CSS

ここで動かすのは ul (親要素) だけ。 animation で動き方を載せ、何をどう動かすかをキーフレームで指定します。

子要素(li)で作った箱は全く変えなくてOK。親要素(ul)に乗ったまま勝手に動いてくれますよ^^

※ transform(回転や移動)の基準点を指定するプロパティ(transform-origin)もありますが、transform-originの規定値は中心( center center )なので、特に指定しなくてOKです^^

CSSコード(コピペOK)

/* 1. リセット++++++++++++++++ */
/* vol1 をそのままコピペしてください */

/* 2. 親要素 ++++++++++++++++ */
ul.polyhedron {
  position: relative;
  border: solid 2px #000;
  width: 200px; height: 200px; 
  margin: 0 auto;
  transform:rotateY(-25deg) rotateX(-25deg);
  transform-style: preserve-3d; /* ← ここまで 「vol1」をまるっとコピペ */
  animation: anime 4s linear infinite; /* この1行を追加します */
}
/* ▼ キーフレームを追加します */
@keyframes anime {
  0% { transform: rotateY(-25deg) rotateX(-25deg); }
  100% {transform: rotateY(-25deg) rotateX(335deg); }
}

親要素に1行 & キーフレーム
たったこれだけ追加するだけで動いてしまうんですよ~~

え、、、ってほどに簡単ラクチンでしょ ^^v

親要素 アニメーションの設定方法

• anime  ⇒
  [animation-name] アニメーションの任意の名前。
  この名前でキーフレームと連携させます。
• 4s        ⇒
  [animation-duration] アニメーションが1回転する時間。( s = 秒 )
  数値を大きくするほど、ゆっくりと変化します。
• linear   ⇒
  [animation-timing-function] 変化スピードの割合
  ( linear = 最初から最後まで一定速度で変化 )
• infinite ⇒
  [animation-iteration-count] アニメーションが繰り返される回数
  ( infinite = 無制限 / 数値で回数を指定する事もできます )

これらのプロパティを変える事で、様々な表現が可能になります。

他にも色々なプロパティがありますので、興味があれば調べてみてくださいね^^

キーフレームの設定方法

• @keyframes ⇒
  キーフレームだよ、って宣言。
• anime ⇒
  [animation-name] 適用する要素と同じ名前。これで関連付けます。
• { } の中に変化のタイミングを記載。上のcssコードは、、、
  {
  0% { transform: rotateY(-25deg) rotateX(-25deg); }
  100% {transform: rotateY(-25deg) rotateX(335deg); }
}
  ▶ 横回転はさせないので、親の rotateY(-25deg) をそのまま記載

  ▶ 親の rotateX(-25deg) を起点にするので「 0% にはそのまま記載」し、起点から縦(上向き)に360度回転するよう 「 100% を rotateX(335) 」にします。
  回転方向の違いや指定方法は、このページ下にある 「3D回転のバリエーション」をご覧ください^^

•  一般的な { } の記載方法。
  1回転の変化を100%として、その中の何%のところで変化させるかを細かく設定する事ができます。
  • 0%  = 変化の開始
    { ここに変化させるプロパティと、開始時の値を入れます }
  • ○○% = 途中の変化
    { 変化のタイミングを変えたい場合などに
      変化させるプロパティと、途中の値を入れます }
  • 100% = 変化の終わり
    {ここに変化させるプロパティと、終了時の値を入れます}

  親要素で「繰り返し」を指定した場合は
  0% → 100% → 0% → ・・・ とシームレスに繋がるようにします^^

3D回転のバリエーション

基本的なソースは変えず、キーフレーム 100%の [ transform ] の指定をちょこっと変えるだけで、簡単に回転方向が変えられます^^

3D回転バリエーション DEMO

※基本ソースからの共通変更点 ⇒ サイズ：120px、li：透過なし

ソースの変更点

キーフレーム0% は、基本ソース  { transform: rotateY(-25deg) rotateX(-25deg); }  のまま。

キーフレーム100% で、動かしたいプロパティの値 (黄色部分)の数値を変えるだけです^^

/ *t11 縦回転 (下)  */   100% {transform: rotateY(-25deg) rotateX(-385deg); }

/* t12 縦回転 (上)  */   100% {transform: rotateY(-25deg) rotateX(335deg); }

/* t13 横回転 (右)  */   100% {transform: rotateY(335deg) rotateX(-25deg); }

/* t14 横回転 (左)  */   100% {transform: rotateY(-385deg) rotateX(-25deg); }

/* t15 斜回転 (左下)*/   100% {transform: rotateY(-385deg) rotateX(-385deg); }

/* t16 斜回転 (右上)*/   100% {transform: rotateY(335deg) rotateX(335deg); }

/* t17 斜回転 (左上)*/   100% {transform: rotateY(-385deg) rotateX(335deg); }

/* t18 斜回転 (右下)*/   100% {transform: rotateY(335deg) rotateX(-385deg); }