<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> #ballParent{ width: 100px; height: 100px; position: relative; transform-style: preserve-3d; transform: rotateX(-30deg); -webkit-animation: rotateBall 3s linear infinite; } .ball{ width: 100%; height: 100%; border-radius: 50px; position: absolute; text-align: -webkit-center; line-height: 100px; font-size: larger; font-family: cursive; opacity: 0.7; } #ball_1 { background-color: #aaaaaa; } #ball_2 { background-color: #aaaaaa; -webkit-transform: rotateY(60deg); opacity: 0.3; } #ball_3 { background-color: #aaaaaa; -webkit-transform: rotateY(120deg); opacity: 0.3; } @-webkit-keyframes rotateBall{ 0% {-webkit-transform: rotateY(0deg);} 50% {-webkit-transform: rotateY(180deg);} 100% {-webkit-transform: rotateY(360deg);} } </style> </head> <body> <div id="ballParent"> <div class="ball" id="ball_1">Surprise7</div> <div class="ball" id="ball_2"></div> <div class="ball" id="ball_3"></div> </div> </body> </html>