【CSS3动画练习】持续3D旋转的圆 

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

 

posted @ 2016-04-27 14:38  surprise7  阅读(237)  评论(0)    收藏  举报