Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > 纯CSS3打造七巧板

纯CSS3打造七巧板

WBOY
Release： 2016-06-20 08:42:17
Original
1863 people have browsed it

七巧板的由来

先来个科普吧，是我在查资料过程中看到的，感觉很有意思。

宋朝有个叫黄伯思的人，对几何图形很有研究，他热情好客，发明了一种用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以上都支持，但需加前缀，所以可以放心使用。

编码实现

首先我们需要一个容器和起个元素用来表示七块板子。

复制代码
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="wrap"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t1 t11"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t2 t22"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t3 t33"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t4 t44"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t5 t55"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t6 t66"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="t t7 t77"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span>
Copy after login
复制代码

其实我们总共用到的图形总共有三种，三角形、正方形行和平行四边形。这在上面提到的文章里面全有，这里涉及到的一点点数学的知识，就是这些板子之间是有一定大小关系的，只需一点点数学知识姐可以解决了。

至此板子的表示就不是问题了，其次还需把板子移动到指定位置才可以拼成好看的图形，这全靠css3的 transform搞定，可以实现平移、缩放、旋转、变形多种操作。

这里我们设置wap的position为relative。所有板子都为absolute。并设置top和left为零，这样初始化时所有的板子都位于左上角，然后将板子的transform-origin设为左上角，就实现了定位时的好计算，下面是css部分的代码。

复制代码
<span style="color: #800000;">.wrap</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 400px</span>;
}<span style="color: #800000;">
.t</span>{<span style="color: #ff0000;">
    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
    top</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    left</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
    transform-origin</span>:<span style="color: #0000ff;">0 0</span>;
}<span style="color: #800000;">
.t1</span>{<span style="color: #ff0000;">
    
    border-top</span>:<span style="color: #0000ff;"> 212.13203435596425732025330863145px solid red</span>;<span style="color: #ff0000;"> 
    border-right</span>:<span style="color: #0000ff;"> 212.13203435596425732025330863145px solid transparent</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(150px, 150px) rotate(-135deg)</span>;
}<span style="color: #800000;">
.t2</span>{<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 212.13203435596425732025330863145px solid #fdaf17</span>;<span style="color: #ff0000;"> 
    border-right</span>:<span style="color: #0000ff;"> 212.13203435596425732025330863145px solid transparent</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(150px, 150px) rotate(135deg)</span>;
}<span style="color: #800000;">
.t3</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #c3d946</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(150px,150px) rotate(45deg)</span>;
}<span style="color: #800000;">
.t4</span>{<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px solid #00bdd0</span>;<span style="color: #ff0000;"> 
    border-right</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px solid transparent</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(150px,150px) rotate(-45deg)</span>;
}<span style="color: #800000;">
.t5</span>{<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px solid #5dbe79</span>;<span style="color: #ff0000;"> 
    border-right</span>:<span style="color: #0000ff;"> 106.06601717798212866012665431573px solid transparent</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(75px,225px) rotate(45deg)</span>;
}<span style="color: #800000;">
.t6</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 150px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 75px</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(300px) rotate(90deg) skew(45deg)</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> #ffdd01</span>;
}<span style="color: #800000;">
.t7</span>{<span style="color: #ff0000;">
    border-top</span>:<span style="color: #0000ff;"> 150px solid #0177bf</span>;<span style="color: #ff0000;"> 
    border-right</span>:<span style="color: #0000ff;"> 150px solid transparent</span>;<span style="color: #ff0000;">
    transform</span>:<span style="color: #0000ff;"> translate(300px,300px) rotate(180deg)</span>;
}
Copy after login
复制代码

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）

 

Related labels：
纯CSS3打造七巧板
source：php.cn
Previous article：jQuery animate easing使用方法 Next article：【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
3
2173
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2325
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1957
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1835
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1885
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template