純CSS3打造七巧板

最近項目上要製做一個七巧板，腦子裏瞬間閃現，什麼。。。七巧板不是小時候玩的嗎。。。

七巧板的由來

先來個科普吧，是我在查資料過程當中看到的，感受頗有意思。

宋朝有個叫黃伯思的人，對幾何圖形頗有研究，他熱情好客，發明了一種用6張小桌子組成的「宴幾」——請客吃飯的小桌子。後來有人把它改進爲7張桌組成的宴幾，能夠根據吃飯人數的不一樣，把桌子拼成不一樣的形狀，好比3人拼成三角形，4人拼成四方形，6人拼成六方形……這樣用餐時人人方便，氣氛更好。後來，有人把宴幾縮小改變到只有七塊板，用它拼圖，演變成一種玩具。

由於它十分巧妙好玩，因此人們叫它「七巧板」。

今天，在世界上幾乎沒有人不知道七巧板和七巧圖，它在國外被稱爲「唐圖」（Tangram），意思是來自中國的拼圖（不是唐代發明的圖）。

納尼，原來Tangram是我們中國的，。。。

方案

看完了有趣的東西，該開始正題了，就是不管使用什麼技術給我整出個七巧板來。。。（在前端頁面裏）

結合本身的知識體系，思考了下大概的思路：

1. Canvas，萬能的Cavans必定能夠解決問題，加上以前作過Painter。靈活性+擴展性知足。
2. CSS3，每一個版子是一個dom元素，而後使用css3搞定。靈活性 擴展性不如canvas。
3. svg，這個應該也能夠吧，但本身對這方面的知識匱乏。
4. 。。。暫時未想出。

考慮到時間成本（太緊了）和其餘。。。緣由，決定使用css3的方案。

開始想板子使用圖片來作，但多虧本身之前寫過一篇‘用CSS代碼寫出的各類形狀圖形的方法’，裏面收錄了使用CSS3製做20種圖形的方法，有興趣的同窗能夠看下，查了下能夠知足所需的7種板子的形狀。

用到屬性

• transform
• translation

技術驗證

開始以前先要驗證下，所要用到的CSS3是否能夠兼容所要需平臺，這多虧http://caniuse.com/。

由於我要運行在移動端，查了下要用到的css3屬性，在安卓2.3以上都支持，但需加前綴，因此能夠放心使用。

編碼實現

首先咱們須要一個容器和起個元素用來表示七塊板子。

<div class="wrap">
    <div class="t t1 t11"></div>
    <div class="t t2 t22"></div>
    <div class="t t3 t33"></div>
    <div class="t t4 t44"></div>
    <div class="t t5 t55"></div>
    <div class="t t6 t66"></div>
    <div class="t t7 t77"></div>
</div>

其實咱們總共用到的圖形總共有三種，三角形、正方形行和平行四邊形。這在上面提到的文章裏面全有，這裏涉及到的一點點數學的知識，就是這些板子之間是有必定大小關係的，只需一點點數學知識姐能夠解決了。

至此板子的表示就不是問題了，其次還需把板子移動到指定位置才能夠拼成好看的圖形，這全靠css3的 transform搞定，能夠實現平移、縮放、旋轉、變形多種操做。

這裏咱們設置wap的position爲relative。全部板子都爲absolute。並設置top和left爲零，這樣初始化時全部的板子都位於左上角，而後將板子的transform-origin設爲左上角，就實現了定位時的好計算，下面是css部分的代碼。

.wrap{
    position: relative;
    width:300px;
    height: 400px;
}
.t{
    position: absolute;
    top:0;
    left:0;
    width: 0;
    height: 0;
    transform-origin:0 0;
}
.t1{
    
    border-top: 212.13203435596425732025330863145px solid red; 
    border-right: 212.13203435596425732025330863145px solid transparent;
    transform: translate(150px, 150px) rotate(-135deg);
}
.t2{
    border-top: 212.13203435596425732025330863145px solid #fdaf17; 
    border-right: 212.13203435596425732025330863145px solid transparent;
    transform: translate(150px, 150px) rotate(135deg);
}
.t3{
    width: 106.06601717798212866012665431573px;
    height: 106.06601717798212866012665431573px;
    background: #c3d946;
    transform: translate(150px,150px) rotate(45deg);
}
.t4{
    border-top: 106.06601717798212866012665431573px solid #00bdd0; 
    border-right: 106.06601717798212866012665431573px solid transparent;
    transform: translate(150px,150px) rotate(-45deg);
}
.t5{
    border-top: 106.06601717798212866012665431573px solid #5dbe79; 
    border-right: 106.06601717798212866012665431573px solid transparent;
    transform: translate(75px,225px) rotate(45deg);
}
.t6{
    width: 150px;
    height: 75px;
    transform: translate(300px) rotate(90deg) skew(45deg);
    background: #ffdd01;
}
.t7{
    border-top: 150px solid #0177bf; 
    border-right: 150px solid transparent;
    transform: translate(300px,300px) rotate(180deg);
}

DEMO

好了，七巧板終於作好了讓咱們來看下效果吧。

留個jsfiddle的代碼，博客園不能欠入，只能留個連接了http://jsfiddle.net/yanhaijing/3tf8ac6q/1/

提升

僅此而已了嗎，固然不是，還有不少可考慮的東西，這裏的css都是寫死的，靈活性太差，若是用LESS的話（我用的就是less），咱們能夠設置一個基本長度變量（less支持變量和數學運算哦），而後其餘的所有基於這個變量計算，這樣只要改變這個變量，就能輕鬆改變整個七巧板的大小，可擴展性是否是有很大進步（實際上我就是這麼作的，但jsfiddle不支持less語法，因此我就寫了個css版的）。

其實還能夠經過css3變化出多種圖形，聽說七巧板的能夠拼出的圖形多大幾千種之多。。。快快開動你的腦筋來製做吧，作好了記得給博主留個連接啊。

進一步的提升就是經過CSS3的transtion，製做動畫，在配合key-frame，能夠製做七巧板變形的複雜動畫，效果美輪美奐啊。

這裏只貼一個圖片吧，不提供代碼了。。。

 

參考資料

• CSS3動畫詳解（http://beiyuu.com/css3-animation/）

• 騰訊動畫手冊（http://ecd.tencent.com/css3/guide.html）