在网上看到的一个canvas实现的玫瑰花，效果很好，但是代码被压缩过，也没有注释，看的云里雾里的。
今天我教大脚用CSS来实现一朵玫瑰花。
先看效果
首先我们画出一个花瓣
1、画出一个长方形div，背景色设置成渐变色。
2、给四个角使用圆角，底部50%，顶部35%
然后使用css的3D属性
3D属性的详细请自行百度，这里不做详细介绍。
从Y轴方向上俯视玫瑰花，就是多个花瓣围绕圆心组成的同心圆。
如下图所示：
我们按照这个规则
1、越靠近中心层，花瓣数量越少
2、所有花瓣按在每层花瓣个数，均匀分布
这样就成为了含苞待放的玫瑰
要想让玫瑰花开发，那么每朵花瓣就不应该跟Y轴平行
必须要从跟Y轴形成向外的角度。
而且越向外层，角度越大。
这个时候就基本上完成了玫瑰花的效果了。
但是在chrome上，后边加入的div会盖在上边层上，并不一定是我们希望的效果。
所以我们要根据div的Z轴方向上的值来给div增加z-index属性。
z值越小，z-index越小。
最后我们跟玫瑰花加上叶子，跟之前花瓣原理是一样的，只是换了颜色和宽度而已。
而且向外开的角度也增大了一些
这里就已经完成了，我们把代码复制一份，然后使用requestAnimationFrame做动画效果。角度越来越大。就出现开花效果了。
演示效果请访问：http://suohb.com/work/flower2.htm
更多特效，请扫描下方二维码关注公众号：
