1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3daixin</title> 6 <style type="text/css"> 7 body{ 8 background:black; 9 } 10 .heart3d{ 11 position:relative; 12 100px; 13 height: 160px; 14 /*border: 2px solid red; 15 border-left:0; 16 border-bottom: 0;*/ 17 margin:50px auto; 18 /*border-radius:50% 50% 0/40% 50% 0;/*斜杠前面是水平方向 斜杠后面是竖直方向 顺序是顺时针*/ 19 /*transform: rotate(45deg);*/ 20 animation: rot 20s linear infinite;/*自定义旋转旋转名称 20s 匀速旋转 无限重复*/ 21 transform-style:preserve-3d; 22 } 23 /*关键帧：定义改变的值*/ 24 @keyframes rot{ 25 form{transform: rotateY(0deg)} 26 to{transform:rotateY(360deg)} 27 } 28 .heart3d div{ 29 position: absolute; 30 left:0; 31 top:0; 32 100px; 33 height: 160px; 34 border: 2px solid red; 35 border-left:0; 36 border-bottom: 0; 37 /*margin:50px auto;*/ 38 border-radius:50% 50% 0/40% 50% 0;/*斜杠前面是水平方向 斜杠后面是竖直方向 顺序是顺时针*/ 39 transform: rotate(45deg); 40 } 41 </style> 42 </head> 43 44 <body> 45 <div class="heart3d"> 46 <script type="text/javascript"> 47 48 var heart3d=//定义一个变量来保存 49 //获取元素 50 //在文档里面get获取元素 51 document.getElementsByClassName("heart3d")[0]; 52 //在控制台里面的输出 console.log(heart3d) 53 for (var i=0;i<36;i++) //for循环 循环变量 定义一个i变量 初始值0 循环36次 自己循环一次 54 { 55 var oDiv =document.createElement("div");//在文档里面创建元素 56 oDiv.style.transform = "rotateY("+i*10+"deg) rotateZ(45deg) translateX(30px)"; 57 heart3d.appendChild(oDiv);//往它里面添加子元素 58 } 59 </script> 60 </body> 61 </html>