top
bottom
left
right
back
front
http://manakaa.com 2013-11-08
ベンダープレフィックスは書いてません。最新のFireFoxで見て下さい。
.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:}
.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);}
.content div{position:absolute;opacity:0.5;}
.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);}
.container:hover .content{transform:rotateY(0.5turn) rotateX(-30deg) rotateZ(20deg);}
div{transition:3s;}
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先生作成の参考ファイル(わかりやすいです。)
perspective:300px;を大外の#containerに追加しただけです。pxの数値が小さいほど奥行き感は増します。