<style> .out{ margin: 200px; transform-style: preserve-3d; animation: all 3s linear infinite; transform-origin: 100px; } .out>div{ background: radial-gradient(transparent 30%,rgba(0,0,0,0.3) 100%); height: 200px; width: 200px; border-radius: 50%; position: absolute; } .d1{ transform: rotateY(0deg); } .d2{ transform: rotateY(120deg); } .d3{ transform: rotateY(240deg); } @keyframes all { 0%{ transform: rotateY(0deg); } 100%{ transform: rotateY(360deg); } } </style> </head> <body> <div class="out"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> </div> </body> </html>
原文：http://www.cnblogs.com/zsn123/p/6604294.html