3 Dキューブ

この短いチュートリアルでは、どのように簡単にCSSで3 Dキューブを作成することを示します.

HTML

ここでhtmlファイルでは、ラッパーのIDと子のdivを持つ親divがあります.そして、最後に、我々は、キューブの6つの段階を表す6つの子のdivを持っている.

<div id="wrapper">
  <div class="cube">
    <!--Front-->
    <div></div>
    <!--Back-->
    <div></div>
    <!--Left-->
    <div></div>
    <!--Right-->
    <div></div>
    <!--Top-->
    <div></div>
    <!--Bottom-->
    <div></div>
  </div>
</div>

CSS

CSSでは、まず第一に、私たちの親のdivのためのスタイルを設定し、それのクラスをターゲットにして私たちの子供のdivラッパーとスタイルのIDをターゲットにします.キューブ.
ラッパーについては、幅と高さを300 px、マージンを100 px autoに設定し、ページの中央にdivを置き、上部から100 pxオフします.
キューブの場合は、相対位置、幅、高さを150 pxに設定します.また、我々はまた、3 Dオブジェクトのように見えるようにXとY軸のいくつかの程度の回転を適用します.

#wrapper{
  width:300px;
  height:300px;
  perspective:700px;
  -webkit-perspective:700px;
  margin:100px auto;
}

.cube{
  position:relative;
  width:150px;
  height:150px;
  transform-style:preserve-3d;
  transform:rotateY(35deg) rotatex(-38deg);
}

上記の2つのスタイルでは、ブラウザで3 D空間を作成できる2つの新しいプロパティがあります.

Perspective create 3d space in our browser.Lower the value higher the 3d depth will be.

We're using transform-style which is common property but we set its value to preserve-3d which will set all the children of .cube in 3d space.

我々が作っている3 D立方体の最終的な部分は、ここにあります.

.cube div{
  position:absolute;
  width:150px;
  height:150px;
  background:rgba(0,0,0,0.1);
}

ここでは、まず第一に、我々はすべての子供divのものを目標としていて、絶対にすべてのそれらのdivの位置をセットしています、そして、その後、我々は(150 px * 150 px)に等しい100 %として、divの高さと幅を設定しています.
子の子をZ軸に置く
たった今、我々は同じZ -軸で互いのすべてのそれらの子供divのものを持ちます.3 D空間の最良の部分は、それが異なるZ軸に項目を配置することができることです.
これはz軸がどのように見えるかです.

今、キューブを作るために、それぞれの子の位置を設定するためのいくつかのCSS作業をしましょう.

.cube div:nth-child(1){
  transform:translateZ(75px);
  background:#237A57;
}

.cube div:nth-child(2){
  transform: rotateX(180deg) translateZ(75px);
  background:#005AA7;
}

.cube div:nth-child(3){
  transform: rotateY(-90deg) translateZ(75px);
  background:#DA4453;
}

.cube div:nth-child(4){
  transform:rotateY(90deg) translateZ(75px);
  background:#a8c0ff;
}

.cube div:nth-child(5){
  transform: rotateX(90deg) translateZ(75px);
  background:#fc4a1a;
}

.cube div:nth-child(6){
  transform:rotateX(-90deg) translateZ(75px);
  background:#f7b733;
}

ここでは、それぞれの子のdivを擬似セレクタとnth - childと呼ばれると我々はスタイルにしたいdivの位置を渡すをターゲットにしています.
私達はちょうど私達の立方体の幅の半分である75 pxにすべてのdivのz軸を設定する.また、すべての子要素のz軸を設定した後、私たちはまた、それぞれのdivをz軸上の正しい位置にロータリーとロータリーを使用してキューブを形成することです.

If you don't give a Z-axis value to the child div's than all those div's will rotate on same Z-axis(0 by default) which will create an image shown above.

マイペン