CSS3 3D魔術方塊

CSS3 3D Pocket Rubik Cube

CSS3 一直是Amos長久以來的問題比較多的一個技術學問,有幸在3D技術背景的朋友協助下,總算把一些CSS3 3D的觀念弄得比較清楚點了,當然打鐵要趁熱,所以想了一下HTML結構之後,就在下班通車時間中把CSS3 3D魔術方塊的基礎寫完了~

回到家後,開始加上些動畫效果,如此一來魔術方塊就算是完整多了,每個面都可以自由旋轉,雖然看起來範例寫好了,但還是有需要處理的問題,像是加上色彩後的物件層級問題,倘若沒有使用SASS這類工具來寫CSS3 3D魔術方塊的完整動畫的話,可能會寫到地老天荒,但是Amos始終與SASS以及SCSS無緣,所以只好寫點簡單的旋轉動畫效果,過過簡單的乾癮囉.以下分享影片給各位看看目前的研究成果囉~^^