/Users/qw/Desktop/屏幕快照 2019-05-16 上午3.04.59.png ...
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>3daixin</title> <style type="text/css"> body{ background:black; } .heart3d{ position:relative; width: 100px; height: 160px; /*border: 2px solid red; border-left:0; border-bottom: 0;*/ margin:50px auto; /*border-radius:50% 50% 0/40% 50% 0;/*斜杠前面是水平方向 斜杠後面是豎直方向 順序是順時針*/ /*transform: rotate(45deg);*/ animation: rot 20s linear infinite;/*自定義旋轉旋轉名稱 20s 勻速旋轉 無限重覆*/ transform-style:preserve-3d; } /*關鍵幀：定義改變的值*/ @keyframes rot{ form{transform: rotateY(0deg)} to{transform:rotateY(360deg)} } .heart3d div{ position: absolute; left:0; top:0; width: 100px; height: 160px; border: 2px solid red; border-left:0; border-bottom: 0; /*margin:50px auto;*/ border-radius:50% 50% 0/40% 50% 0;/*斜杠前面是水平方向 斜杠後面是豎直方向 順序是順時針*/ transform: rotate(45deg); } </style> </head> <body> <div class="heart3d"> <script type="text/javascript"> var heart3d=//定義一個變數來保存 //獲取元素 //在文檔裡面get獲取元素 document.getElementsByClassName("heart3d")[0]; //在控制台裡面的輸出 console.log(heart3d) for (var i=0;i<36;i++) //for迴圈 迴圈變數 定義一個i變數 初始值0 迴圈36次 自己迴圈一次 { var oDiv =document.createElement("div");//在文檔裡面創建元素 oDiv.style.transform = "rotateY("+i*10+"deg) rotateZ(45deg) translateX(30px)"; heart3d.appendChild(oDiv);//往它裡面添加子元素 } </script> </body> </html>
