Jen

使用CSS做出一個3D Cube

最近從同事那邊得知一個css很Rock’n Roll Style的技術,

(因為學習新知也是一種Rock’n Roll 的Style!!, Yeah!!)

就是用CSS做出一個立體效果的CUBE,

有圖 一定有真相…

multiple-cubes-css

爸特(but…)

目前只有在以下版本的Browser才會有作用

(M$的IE沒有支援,打不過它 也不打算加入他, 好樣)

Fire­fox 3.5+ -moz-transform (doc­u­ment­a­tion)

Safari 3.2+ -webkit-transform (doc­u­ment­a­tion).

如何使用?

CSS

body
{
 padding:0;
 margin:0;
}
.cube {
       position: relative;
       top: 174px;
}
.rightFace,
.leftFace,
.topFace div {
       padding: 10px;
       width: 180px;
       height: 180px;
}
.rightFace,
.leftFace,
.topFace {
       position: absolute;
}
.leftFace {
       -webkit-transform: skewY(30deg);
       -moz-transform: skewY(30deg);
       background-color: #ccc;
}
.rightFace {
       -webkit-transform: skewY(-30deg);
       -moz-transform: skewY(-30deg);
       background-color: #ddd;
       left: 200px;
}
.topFace div {
       -webkit-transform: skewY(-30deg) scaleY(1.16);
       -moz-transform: skewY(-30deg) scaleY(1.16);
       background-color: #eee;
       font-size: 0.862em;
}
.topFace {
       -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
       top: -158px;
       left: 100px;
}

HTML

<div class="cube">
   <div class="topFace">
           <div>
               上面的面丫
           </div>
   </div>
   <div class="leftFace">
           Content
   </div>
   <div class="rightFace">
           Content
   </div>
</div>

就這個簡單…

加玩一點動態的,用javascript讓整個cube來轉圈圈.

$(function() {
  divRotate();
});
var _sin = 0;
function divRotate() {
   _sin = _sin + 10;
   $(".cube").css("-moz-transform", "rotate(" + _sin + "deg)");
   setTimeout("divRotate();", 100);
}

記得include jQuery…方塊就會一直轉了@@…

0

1

2

Just for fun, 有什麼應用面大家可以想想看,只是現階段IE還不支援,

IE依舊自以為是啊~~~~~

參考:

http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/

1 意見:

  匿名

2013年2月15日 下午8:54



Review my web site: cordyceps