zoukankan html css js c++ java

【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

查看全文

相关阅读:
将Excel文件.xls导入SQL Server 2005
linux mount命令
 python write file
vim visual模式复制
 chef简介
 录音整理文字工具otranscribe简介
 ftp put get 的使用方法
 yum lock 解决方法
 phalcon builder get raw sql
centos7安装VirtualBox

原文地址：https://www.cnblogs.com/surprise7/p/5438802.html