七夕情人节表白-纯JS实现3D心形+图片旋转

七夕情人节就快到了，这里献上纯js表白神器-心里都是你，预览：

技术点：css-3d、js-随机色、js-transform

1.html：

     <div class="heart">
         <div class="cube">
             <div>
                 <img src="data:images/1.jpg" width="100" height="100" alt="">
             </div>
             <div>
                 <img src="data:images/2.jpg" width="100" height="100" alt="">
             </div>
             <div>
                 <img src="data:images/3.jpg" width="100" height="100" alt="">
             </div>
             <div>
                 <img src="data:images/4.jpg" width="100" height="100" alt="">
             </div>
             <div>
                 <img src="data:images/5.jpg" width="100" height="100" alt="">
             </div>
             <div>
                 <img src="data:images/6.jpg" width="100" height="100" alt="">
             </div>
         </div>
     </div>

2.css：

 *{
     margin:;
     padding:;
 }
 body{
     background:#000;
     overflow:hidden;
 }
 .heart{
     position:absolute;
     left:;
     right:;
     top:;
     bottom:;
     width:200px;
     height:260px;
     margin: auto;
     transform-style:preserve-3d;
     perspective:800px;
     animation:rot 15s linear infinite;
 }
 @keyframes rot{
     from{transform:rotateY(0deg) rotateX(0deg)}
     to{transform:rotateY(360deg) rotateX(360deg)}
 }
 .rib{
     position:absolute;
     width:200px;
     height:260px;
     border:solid red;
     border-width:1px 1px 0 0;
     border-radius:100% 100% 0/40% 100% 0;
     transition: all 1s;
 }
 .cube{
     position:absolute;
     left:;
     right:;
     top:;
     bottom:;
     margin:auto;
     width:100px;
     height:100px;
     color:red;
     transform-style:preserve-3d;
     transform:translateZ(50px);
 }
 .cube div{
     position:absolute;
     width:100px;
     height:100px;
 }
 .cube div:nth-child(1){
     left:;
     top:-100px;
     transform-origin:bottom;
     transform:rotateX(90deg);
 }
 .cube div:nth-child(2){
     left:;
     top:100px;
     transform-origin:top;
     transform:rotateX(-90deg);
 }
 .cube div:nth-child(3){
     left:-100px;
     top:0px;
     transform-origin:right;
     transform:rotateY(-90deg);
 }
 .cube div:nth-child(4){
     left:100px;
     top:0px;
     transform-origin:left;
     transform:rotateY(90deg);
 }
 .cube div:nth-child(5){
     left:;
     top:0px;
 }
 .cube div:nth-child(6){
     left:;
     top:0px;
     transform:translateZ(-100px);
 }

3.js：

 var heart = document.getElementsByClassName("heart")[0];
 for (var i = 0; i < 36; i++) {
     var oDiv = document.createElement("div");
     oDiv.className = "rib";
     // 画36条心形曲线
     oDiv.style.transform = "rotateY(" + 10 * i + "deg) rotateZ(45deg) translateX(30px)";
     var n = 0;
     setInterval(function() {
         if (n < 36) {
             document.getElementsByClassName('rib')[n].style.borderColor = getRandomColor();
             n = n + 1;
         } else {
             n = 0;
         }
     },1000)
     console.log(n)
     heart.appendChild(oDiv);
 }

 // 随机色
 var getRandomColor = function(){
   return  '#' +
     (function(color){
     return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])
       && (color.length == 6) ?  color : arguments.callee(color);
   })('');
 } 

图片资源自行填充。

下图效果只是添加了一个hover改变div的transform属性，大家可以扩展制作。