利用css3与html5来制作3d爱心

首先：爱心的制作

爱心的制作利用了css3的新增属性border-radius，border-radius的属性最多有8个值，

例如：border-radius：10px 20px 30px 40px/10px 20px 30px 40px;

斜杠之前代表上下左右的水平方向变化的圆角，之后代表上下左右的竖直方向变化的圆角，下面是例子

css：

*   {   padding:0;

         margin:0;} 

.heart3d{ position:absolute; top:0; left:0; margin-top:-80px; margin-left:-50px;//适应浏览器居中 width:100px; height:160px; } .heart{            position: absolute;            top: 0;            left: 0;            width:100px;            height: 160px;            border-radius: 50% 40% 0/50% 40% 0;            border-top:2px solid red;            border-right:2px solid red;        }

html:

上面形成了心得一般然后利用js生成其余的

js：

形成了立体的爱心；可能会遇到遇到一些问题像遇到所成画面为2d；只需加一个属性 transfrom-style：

preserve-3d ;

即可。补充一点再加一个景深属性，值都在1000px-1200px；

perspective : 1000px ;

第一次写感觉语无伦次