<!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>
