こんにちは。キャスレーコンサルティング システムデザイン部の阿部です。

今回は、CSSのtransformプロパティを活用し、HTMLとCSSのみによる三次元図形の作成とその操作を行ってみました。

まずは完成図です。
各Λをクリックすることでそれぞれの方向に動き、中央の○をクリックすることで初期表示に戻ります。

以下のように手順を解説いたします。

1.transformプロパティによる要素の変形
2.変形した要素で立方体を作る

  • 2.1.面の作成
  • 2.2.面の基準を指定
  • 2.3.各面を回転させる

3.ラベルとラジオボタンで立方体を動かす

  • 3.1.ボタンの作成
  • 3.2.各ボタンに回転のアニメーションを設定する

4.おわりに

1.transformプロパティによる要素の変形

要素の変形を行うCSSのtransformプロパティは、X軸方向、Y軸方向といった二次元的な変形に加え、
Z軸方向への三次元的な変形を行うことができます。

このプロパティによって変形させた要素を面として組み合わせると、三次元的な図形を作成することができます。

作成にあたっては、以下の関数をメインに使用します。

rotateX()
→要素をX軸を中心として指定の角度に回転させる
rotateY()
→要素をY軸を中心として指定の角度に回転させる
rotateZ()
→要素をZ軸を中心として指定の角度に回転させる

translateX()
→要素をX軸方向へ指定の距離分移動させる
translateY()
→要素をY軸方向へ指定の距離分移動させる
translateZ()
→要素をZ軸方向へ指定の距離分移動させる

また、要素を入れ子にするため、以下のプロパティを使い、子孫要素に対しても三次元的な描画を摘要できるようにします。

transform-style: preserve-3d
→指定した要素の子孫要素に対しても三次元的な描画を行う

transformプロパティは3次元的な変形を行う場合、以下のブラウザに対応します。

SnapCrab_NoName_2017-9-12_19-28-27_No-00
参考:caniuse.com

今回使用するtransform-style: preserve-3dプロパティがIEに対応していないため、
それ以外の対応ブラウザでの閲覧をお願いいたします。

2.変形した要素で立方体を作る

それでは、正方形の形をとった要素を組み合わせ、立方体を作成してみましょう。
transformプロパティの、要素を回転させるrotate関数と、要素を移動させるtranslate関数を組み合わせます。

2.1.面の作成

まずは面となるdiv要素を6面分作成します。
後に各面を一括で操作できるよう、ここでは各面を.cubeの子要素として配置します。

2.2.面の基準を指定

次に、positionプロパティで位置を指定し、作成した6面を重ねます。
preserve-3dを指定し.cubeの子要素となる各面を三次元的に展開できるようにします。
ついでに、少し色を透過しておきます。

CSS(抜粋)

.cube{
  position: relative;
  transform-style: preserve-3d;
}
.cube div{
  border: 1px solid;
  position: absolute;
  opacity:0.7;
}

これで立方体作成の準備が整いました。

2.3.各面を回転させる

前面と背面は、Z軸を基準に面を前後に移動させることによって作成できます。
上面、底面、右面、左面はそれぞれY軸、X軸を中心に回転させ、それを移動させます

これで立方体が完成します。

CSS(抜粋)

.s_front{
  background: red;
  transform: translateZ(100px);
}
.s_back{
  background: orange;
  transform: translateZ(-100px);
}
.s_right{
  background: yellow;
  transform: rotateY(90deg) translateZ(100px);
}
.s_left{
  background: green;
  transform: rotateY(-90deg) translateZ(100px);
}
.s_top{
  background: blue;
  transform: rotateX(90deg) translateZ(100px);
}
.s_bottom{
  background: purple;
  transform: rotateX(-90deg) translateZ(100px);
}

そのままでは分かりづらいので、立方体に以下を指定してやや回転させた結果がこちらです。

CSS(抜粋)

.cube{
 position: relative;
 transform-style: preserve-3d;
 transform: rotateX(-20deg) rotateY(20deg) rotateZ(-20deg);
}

3.ラベルとラジオボタンで立方体を動かす

3次元像の操作はjQueryなどで行うことが一般的ですが、ある程度の操作であれば、
擬似クラスのcheckedを活用することにより、HTMLとCSSのみで実現することができます。

ここでは、上下左右、正面のボタンを作成し、立方体をそれぞれの方向に動かしてみます。

3.1.ボタンの作成

まずはラジオボタンとその操作を行うそれっぽい見た目のラベルを立方体の手前に配置します。

HTML(抜粋)

<div class="base">
  <label class="label" for="top"></label>
  <label class="label" for="left"></label>
  <label class="label" for="right"></label>
  <label class="label" for="bottom"></label>
  <label class="label" for="center"></label>
  <input type="radio" name="labels" id="top">
  <input type="radio" name="labels" id="left">
  <input type="radio" name="labels" id="right">
  <input type="radio" name="labels" id="bottom">
  <input type="radio" name="labels" id="center">
  <div class="cube">

CSS(抜粋)

input{
  display: none;
}
label{
  height: 10px;
  width: 10px;
  background: none;
  position: absolute;
  z-index: 10;
  border-top: 3px solid white;
  border-left: 3px solid white;
}
.top{
  top: 0;
  left: 50%;
  margin-left: -6px;
  transform: rotate(45deg);
}
.left{
  top:50%;
  left:0;
  margin-top: -6px;
  transform: rotate(-45deg);
}
.right{
  top:50%;
  right:0;
  margin-top: -6px;
  transform: rotate(135deg);
}
.bottom{
  bottom: 0;
  left: 50%;
  margin-left: -6px;
  transform: rotate(225deg);
}
.center{
  height: 20px;
  width: 20px;
  border-radius: 10px;
  border:none;
  background: white;
  top: 50%;
  left: 50%;
  margin-top: -9px;
  margin-left: -9px;
}

3.2.各ボタンに回転のアニメーションを設定する

それぞれがチェックされた際の回転方向を指定します。
ここでは、各矢印をクリックしたらそれぞれの方向に90度回転、中央の丸をクリックすると初期表示に戻るようにします。

CSS(抜粋)

.cube{
  position: relative;
  transform-style: preserve-3d;
  transition: 1s;
}

#top:checked ~ .cube{
  transform: rotateX(90deg);
}
#bottom:checked ~ .cube{
  transform: rotateX(-90deg);
}
#left:checked ~ .cube{
  transform: rotateY(-90deg);
}
#right:checked ~ .cube{
  transform: rotateY(90deg);
}

また、.cubeにtransitionを指定し、これらの回転を滑らかに行えるようにします。

CSS(抜粋)

.cube{
  position: relative;
  transform-style: preserve-3d;
  transition: 1s;
}

これで、立方体を操作できるようになりました!
改めて完成図を貼ってみます。

4.おわりに

いかがでしたでしょうか。
全てのブラウザに対応しているわけではないので、業務レベルで使えるかどうかは微妙なところですが、
CSSだけで三次元図形を軽快に操作ができるのは驚きですね。

今回メインで使用したtransformプロパティは、使いこなすとCSSだけでも様々な表現ができます。
埋め込みに使用したCodePenにも、素晴らしい作品が多数掲載されていますので、ぜひ見てみてください!


こんにちは、キャスレーコンサルティングSD(システム・デザイン)部の青木です。
今回はFontAwesomeを使ってWebページにアイコンを表示してみようと思います。

FontAwesomeとは

FontAwesomeは商用でも無料で使用することができ、様々なユニークなアイコンを画像ではなく、
テキストとしてWebページ上に表示することができるWebアイコンフォントです。

テキストでの表示となるため、cssで自由に大きさや色を変更することができます。
また、FontAwesome自体に多数のアイコン表示機能が組み込まれており、
現時点で600種類以上のアイコンを簡単にWebページに表示することができます。

フォントのライセンスはSIL OFL 1.1、コードのライセンスはMIT Licenseとなっています。
http://scripts.sil.org/OFL
http://opensource.org/licenses/mit-license.html (続きを読む…)


はじめまして、技術ブログ初投稿のキャスレーコンサルティングのSD(システム・デザイン)部・瀬戸口です。
フロント技術とデザインが好きなエンジニアです。よろしくお願いします。

今回は、HTML5で新たに実装された機能「フォームバリデーション」について、少し触ってみたのでご紹介します。
長年HTML4に慣れ親しんだ身としては、HTML5でフォームバリデーションができる!と知った時、とても感動しました。
是非実務にも取り入れたいと思ったので、どういった使い方をすると良さそうか、また、何に注意すべきかを検証してみました。

(続きを読む…)



  • Profile
    キャスレーコンサルティングの技術ブログです。
    当社エンジニアが技術面でのTips、技術系イベント等についてご紹介いたします。
  • CSV社長ブログ
  • チーム・キャスレーブログ