3D旋轉時間，使用JS寫的

標簽：

Html/CSS JavaScript CSS3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div
        {
            float: left;
            border: 1px solid red;
            height: 250px;
            width: 150px;
            background:#000;
            color: #fff;
            font-size: 200px;
            text-align: center;
            line-height: 250px;
            -webkit-transition:all 1s;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div id="H1"></div>
    <div id="H2"></div>
    <div>:</div>
    <div id="M1"></div>
    <div id="M2"></div>
    <div id="dian">:</div>
    <div id="S1"></div>
    <div id="S2"></div>
    <script type="text/javascript">
    var deg=0;
    var degg=0;
    setInterval(function(){
        var a = new Date();
        var S2 = document.getElementById("S2");
        var S1 = document.getElementById("S1");
        var M2 = document.getElementById("M2");
        var M1 = document.getElementById("M1");
        document.getElementById("H1").innerHTML=(a.getHours()+"").substring(0,1);
        document.getElementById("H2").innerHTML=(a.getHours()+"").substring(1,2);
        document.getElementById("M1").innerHTML=(a.getMinutes()+"").substring(0,1);
        document.getElementById("M2").innerHTML=(a.getMinutes()+"").substring(1,2);
        S1.innerHTML=(a.getSeconds()+"").substring(0,1);
        S2.innerHTML=(a.getSeconds()+"").substring(1,2);
        var langm = a.getMinutes()+"";
        var langs = a.getSeconds()+"";
        if(langm.length==1)
        {
            M1.innerHTML="0";
            M2.innerHTML=(a.getMinutes()+"").substring(0,1);
        }
        if(langs.length==1)
        {
            S1.innerHTML="0";
            S2.innerHTML=(a.getSeconds()+"").substring(0,1);
        }
        deg+=360;
        S2.style.webkitTransform="rotateY("+deg+"deg)";
        if(S2.innerHTML==0)
        {
            degg+=360;
            S1.style.webkitTransform="rotateY("+degg+"deg)";
        }
        document.getElementById("dian").style.webkitTransform="rotateY("+deg+"deg)";    

    }, 1000)
    </script>
</body>
</html>

點擊查看更多內容