3D爱心制作

（作者：张滋，撰写时间：2019年2月13日）
1.我们首先要做好一半爱心，我们通过边框来制作出来，那么我们来布局。代码如下：



2．接下来就是写样式。代码如下：



3. 这时我们要把那个盒子叫box1给注释掉，因为接下来我们要用js来实现爱心，首先我们先要创建40条红线，通过for循环语句，然后我们来创建div，类名叫box1，我们需要把它放到box里面，那这时我们要获取box的类名，然后我们获取第0个，接下来通过appendChli再box盒子里插入box1，这时我们发现已经成功创建40个div了，这时div是没有样式的，我们就要给div添加样式，首先我们让它沿Y轴旋转360度，i*10代表的是值越大线与线之间的距离就越大，这样我们就完成了360度的效果。然后让它每一个沿Z轴旋转45度，这时大致完成爱心了，但是这时我们会发现它下面一部分会超出来，然后我们用translateX位移来调一下，这时我们最终结果是30px。js代码如下：



这时一个爱心就完成了，这时我们让它旋转一下，代码如下：


然后我们需要在box里调用动画效果，代码如下：



这样就完成了一个3D效果的爱心了。