前端黑科技——纯clip-path制作属于你的个人动画

本页DEMO只兼容到webkit浏览器，请确保你的正确打开姿势

鼠标移上去即可看到效果

无聊翻着网站，突然一个叫species-in-pieces的网站让我虎驱一震！

右击审查元素 bibibibi

仔细观察一番原来是clip-path实现的
CSS样式的clip-path来源于SVG<clipPath>元素，它们的本质都是剪切
每个人都知道剪切，那么clip-path实现的剪切有什么特别之处呢？

它的剪切元素可以是任意对象

整个HTML页面，form表单，图片，一切都可以变成一块一块的

clip-path里面的数值变化可以触发transition

下面是一个简单的表单demo，3D变化，随机动态的改变其rotateXYZ、translate3D的值

这里只是简单的演示，复杂的还是建议去看看
网易小哥的博文 http://leeluolee.github.io/2015/04/01/render-3d-use-clip-path/