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

「CSSで作った箱型の立体を回転させる」前に、まずは箱型の立体を線画する事から始めます。

立体の箱をCSSだけで作る方法を、そこそこ??詳しくご案内。
作り方を理解すれば、結構簡単にできちゃいます^^v

CSSだけで作るから、色々カスタマイズできるし修正もラクチン。何よりとっても軽い!!

立体になっているから、これだけでも結構目を引くアイテムになりますよ!!

Demo

これが基本形になります^^

1
正面
2
蓋
3
裏面
4
底
5
左
6
右

※分かりやすいよう各面を透過にして、回転軸となる親要素(起点)に線を入れています

HTML

HTMLは、とてもシンプルなリスト。

最終的に動かすことを前提にしているので、6面全て入れていますが

静止状態のまま
透過させない

のであれば、表示されない面は削除してもOKです

<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>

※ “polyhedron-wrap” は規定値リセットや位置設定用に利用しています。

CSS

li (子要素) それぞれの位置を動かすことで立体を作り、ul (親要素) で出来上がった立体全体の傾斜を指定します。

今回は正方形にしていますが、
width、height、transform を変える事で、縦長でも横長でも自由に作る事が出来ます^^

CSSコード(コピペOK)

リセットとul (親要素) 位置や傾斜を設定

/* 1. リセット++++++++++++++++ */
.polyhedron-wrap {
  margin: 3rem auto 0; text-align: center;  /* 変更可 削除可*/
}
.polyhedron-wrap ul, .polyhedron-wrap li {
  box-sizing: border-box;
  list-style: none;
  padding: 0;
}
/* 2. 親要素 ++++++++++++++++ */
ul.polyhedron {
  position: relative;
  border: solid 2px #000;         /* 回転軸確認用 ⇒ 最後に削除!! */
  width: 200px; height: 200px;    /* 変更注意  ※子要素(li)と同じサイズに!! */ 
  margin: 0 auto;                 /* 変更可 削除可 */
  transform:rotateY(-25deg) rotateX(-25deg);   /* 変更可 立体の傾斜を設定 */
  transform-style: preserve-3d;
}

li (子要素) で立体を成型

立体を作るイメージは、トランプで作るカードタワー。
重ねて置いてある個々のパーツ(li)を、transformを使って (立てたり、横にしたり、向きを変えたり)箱を組み立てていきます^^

/* 3. 子要素 ++++++++++++++++ */
.polyhedron li {
  position: absolute; top: 0; left: 0;
  width: 200px; height: 200px; /* 変更注意  ※親要素(ul)と同じサイズに!! */ 
  color: #fff;          /* 変更可 削除可 */
  font-size: 36px;      /* 変更可 削除可 */
  line-height: 1;       /* 変更可 削除可 */
  text-align: center;   /* 変更可 削除可 */
  padding-top: 15px;    /* 変更可 削除可 */
}
.polyhedron span {font-size: 70px}    /* 変更可 削除可 */
}

.face1 {
  background: rgba(0,255,255,0.7);    /* 変更可 削除可 */
  transform: translateZ(100px);       /*  変更注意  */
}
.face3 {
  background: rgba(135,255,0,0.7);                /* 変更可 削除可 */
  transform: translateZ(-100px) rotateX(-180deg); /*  変更注意  */
}
.face2 {
  background: rgba(255,60,195,0.7);             /* 変更可 削除可 */
  transform: translateY(-100px) rotateX(90deg); /*  変更注意  */
}
.face4 {
  background: rgba(255,100,85,0.7);             /* 変更可 削除可 */
  transform: translateY(100px) rotateX(-90deg); /*  変更注意  */
}
.face5 {
  background: rgba(255,185,0,0.7);             /* 変更可 削除可 */
  transform: translateX(100px) rotateY(90deg); /*  変更注意  */
 }
.face6 {
  background: rgba(85,120,255,0.7);             /* 変更可 削除可 */
  transform: translateX(-100px) rotateY(90deg); /*  変更注意  */
}

CSSカスタマイズと注意点

変更可 ⇒ 自由に変更可能です
削除可 ⇒ 不要であれば、行(プロパティ)ごと削除OKです
変更注意 ⇒ 親要素・子要素を同サイズにします
変更注意 ⇒ ここでpartsの組み立てをしています
※ 適当に変えると箱型にならなくなりますのでご注意ください

1.リセット

2~4行目は、前後の要素との間隔など全体の位置設定です。
不要であれば、cssは削除OKです。(html側のboxやclassは消さないで下さい)

5行目以降はこのままにします。
親スタイルやタグの初期値などにより想定通りに動かない場合がありますので、ここでスタイルを一旦リセットしています。

2.親要素

変更はCODEの説明に従ってください。

(親要素) 16行目 transform:rotateY(-25deg) rotateX(-25deg);
この傾斜は、出来上がった立体を動かして見せるだけなので、立体の各パーツ(li)自体に影響を与えません。色々動かして遊んでみてくださいね^^
(親要素) 17行目 transform-style: preserve-3d;
このプロパティで「子要素を3D空間に配置 (立体になる)」するようにしています。

3.子要素

2~12行目 .polyhedron li
ここで位置やテキストなど各パーツ共通の項目を設定します。

14~37行目各パーツ(li)の個別設定です。
個々の li は・・・

上の行 ⇒ 必要に応じて、背景色や背景画像などを設定します。
下の行 ⇒ ここで、パーツごとの位置を指定します。
- rotate系 ⇒ 変更する必要はありません
- translate系 ⇒ li の形によって変化します
  1. 正方形 ⇒ translateは、1辺の半分( width ÷ 2 )移動する。
  2. 長方形 ⇒ 短辺の正方形にした2パーツの translate の数値を変えて調整する。(translate のタイプを変える必要はありません)
    「短辺正方形2パーツのtranslate数値をプラス」すると「長辺÷2」と同じ数値になります。一方の位置が決まれば、残りの位置も決めやすいですよ^^