<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background:#000; } #heart{ width: 160px; height: 160px; margin: 200px auto; transform-style: preserve-3d;/*设置3d环境*/ animation: rota 15s linear infinite;/*css3自定义动画 ：名称 时间 匀速 无限*/ -webkit-animation: rota 15s linear infinite; } @-webkit-keyframes rota{ to{ transform: rotateX(360deg) rotateY(360deg); -webkit-transform: rotateX(360deg) rotateY(360deg); } } #heart div.rot{ position: absolute; left: 0; top: 0; width: 100px; height: 160px; border: 1px solid red; border-radius: 50% 50% 0/40% 50% 0;/*斜杠前面是水平方向 后面是竖直方向*/ border-width: 1px 1px 0 0; } .cube{ position: relative; width: 52px; height: 52px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -webkit-transform: translateX(25px) translateY(56px) translateZ(30px); } .cube:hover{ transform: rotateY(360deg); -webkit-transform: rotateY(360deg); } .cube div { position: absolute; width: 52px; height: 52px; } .cube div:nth-child(1){/*结构伪类选择器*/ left: 0; top: -52px; /*transform-origin: 50% 50% 0;*/ transform-origin:bottom; -webkit-transform-origin: bottom; transform: rotateX(90deg); -webkit-transform: rotateX(90deg); } .cube div:nth-child(2){/*结构伪类选择器*/ left: 0; top: 52px; transform-origin:top; -webkit-transform-origin: top; transform: rotateX(-90deg); -webkit-transform: rotateX(-90deg); } .cube div:nth-child(3){/*结构伪类选择器*/ left: -52px; top: 0; transform-origin:right; -webkit-transform-origin: right; transform: rotateY(-90deg); -webkit-transform: rotateY(-90deg); } .cube div:nth-child(4){/*结构伪类选择器*/ left: 52px; top: 0; transform-origin:left; -webkit-transform-origin: left; transform: rotateY(90deg); -webkit-transform: rotateY(90deg); } .cube div:nth-child(5){/*结构伪类选择器*/ left: 0; top: 0; } .cube div:nth-child(6){/*结构伪类选择器*/ left: 0; top: 0; transform: translateZ(-52px); -webkit-transform: translateZ(-52px); } </style> </head> <body> <div id="heart"> <div class="cube"> <div> <img src="img/pic1.jpg" width="52" height="52" /> </div> <div> <img src="img/pic2.jpg" width="52" height="52" /> </div> <div> <img src="img/pic3.jpg" width="52" height="52" /> </div> <div> <img src="img/pic4.jpg" width="52" height="52" /> </div> <div> <img src="img/pic5.jpg" width="52" height="52" /> </div> <div> <img src="img/pic6.jpg" width="52" height="52" /> </div> </div> </div> <div class="cube"></div> </body> </html> <script> var heart = document.getElementById('heart'); for (var i=0;i<36;i++) { var oDiv = document.createElement('div'); oDiv.className = 'rot'; oDiv.style.transform = 'rotateY('+10*i+'deg) rotateZ(45deg)'; oDiv.style.webkitTransform = 'rotateY('+10*i+'deg) rotateZ(45deg) translateX(30PX)'; heart.appendChild(oDiv); } </script>