纯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）