http://manakaa.com 2013-11-08

css3のtransformなどを使い立体の箱を作り、hoverで回転させようの巻

ベンダープレフィックスは書いてません。最新のFireFoxで見て下さい。

完成品(hoverで回転します。)

top
bottom
left
right
back
front

作り方

まずはhtml、6面体なのでdivで6つの要素を作る。

  1. 分かり易いように、それぞれに違う色をつけます。高さ&幅を指定する。
    (今回oocssでやります。※classの使い回しをする事で、cssがコンパクトになる。)
  2. さらに分かりやすいようにopacityで半透明にします。
  3. 各面にtop,bottom,left,right,back,frontと名前をつける。
  4. 6つのdivをdivで囲みclass="content"とする。
  5. さらにそれらをdivで囲みclass="container"とする。
  6. htmlはこれだけ。(以下参照)

html

<div class="container">
<div class="content">
<div class="top w10 h5">top</div>
<div class="bottom w10 h5">bottom</div>
<div class="left w5 h10">left</div>
<div class="right w5 h10">right</div>
<div class="back w10 h10">back</div>
<div class="front w10 h10">front</div>
</div>
</div>

css

.w10{width:10em;}
.h10{height:10em;}
.w5{width:5em;}
.h5{height:5em;}
.top{background-color:gold;}
.bottom{background-color:teal;}
.left{background-color:pink;}
.right{background-color:lime;}
.front{background-color:}
.back{background-color:}

cssで立体にしていきます。

  1. .conteinerと.contentに以下の指定をします。position:absoluteで基準点とします。立体のものを作る時にはtransform-style:preserve-3d;を必ずかきましょう。roteteで全体を傾けます。Y:X:Z は縦・横・斜め軸です。degは単位。
    .container{height:10em;width:10em;position:relative;margin:5em auto;}
    .content{height:10em;width:10em;position:absolute;transform-style:preserve-3d;
               transform:rotateY(10deg) rotateX(20deg) rotateZ(10deg);}
    
  2. 6つのdivをabsoluteします。(いったん1つに重ねる。)見えなくなるのでopacityで透過する。
    .content div{position:absolute;opacity:0.5;}
    
  3. 以下のように指定します。roteteで回転させ。top,bottom,left,rightで位置をあわせます。回転させる際に文字が読めるようにする。(裏表に注意する。)
    .top{background-color:gold;top:-2.5em;transform:rotateX(90deg);}
    .bottom{background-color:teal;bottom:-2.5em;transform:rotateX(-90deg);}
    .left{background-color:pink;left:-2.5em;transform:rotateY(90deg);}
    .right{background-color:lime;right:-2.5em;transform:rotateY(90deg);}
    .front{background-color:indianred;transform:translateZ(2.5em);z-index:10;}
    .back{background-color:skyblue;transform:translateZ(-2.5em) rotateY(180deg);}
    
  4. 最後にhoverの指定です。containerをhoverしたら、contentがどうなるか指定。0.5turnは半回転、1turnなら1回転。degは角度。rotateZ(20deg)ならz軸を中心に20度回転する。-20degなら20度逆回転する。ちなみにデフォルトの回転の基準点は真ん中だけど、transform-originで基準点を変えられます。
    .container:hover .content{transform:rotateY(0.5turn) rotateX(-30deg) rotateZ(20deg);}
    
  5. 早さの指定です。3sは3秒かけてhoverの指定が行われるという事です。
    div{transition:3s;}
    
  6. 全部のcssは以下の通りです。

    div{transition:3s;}
    .container{height:10em;width:10em;position:relative;margin:5em auto;}
    .content{height:10em;width:10em;position:absolute;transform-style:preserve-3d;
                  transform:rotateY(10deg) rotateX(20deg) rotateZ(10deg);}
    .container:hover .content{transform:rotateY(0.5turn) rotateX(30deg) rotateZ(20deg);}
    .content div{position:absolute;opacity:0.5;}
    .w10{width:10em;}
    .h10{height:10em;}
    .w5{width:5em;}
    .h5{height:5em;}
    .top{background-color:gold;top:-2.5em;transform:rotateX(90deg);}
    .bottom{background-color:teal;bottom:-2.5em;transform:rotateX(-90deg);}
    .left{background-color:pink;left:-2.5em;transform:rotateY(-90deg);}
    .right{background-color:lime;right:-2.5em;transform:rotateY(90deg);}
    .front{background-color:indianred;transform:translateZ(2.5em);z-index:10;}
    .back{background-color:skyblue;transform:translateZ(-2.5em) rotateY(180deg);}
    

立体について分からない人はこちらも参考にして下さい。→ksk先生作成の参考ファイル(わかりやすいです。)

アレンジバージョン1(画像を入れてみました。)

  • name : nobu
  • birth : sep 8
  • blood : O
  • born : tokyo
click me

アレンジバージョン2(奥行き感をだしました。)

perspective:300px;を大外の#containerに追加しただけです。pxの数値が小さいほど奥行き感は増します。