完成品（hoverで回転します。）

作り方

まずは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

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

全部の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);}