3D效果JS时间，每个牌都能翻转-原创手记-慕课网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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 id="dian1">:</div>
    <div id="M1"></div>
    <div id="M2"></div>
    <div id="dian2">:</div>
    <div id="S1"></div>
    <div id="S2"></div>
    <script type="text/javascript">
    var deg=0;
    var degg=0;
    setInterval(function(){

        var H1=  document.getElementById("H1");
        var H2= document.getElementById("H2");
        var S2 = document.getElementById("S2");
        var S1 = document.getElementById("S1");
        var M2 = document.getElementById("M2");
        var M1 = document.getElementById("M1");
         var a = new Date();
        var langm =a.getMinutes()+"";
        var langs = a.getSeconds()+"";
        var langh=a.getHours()+"";
        if (langh.length==1) {
             H1.innerHTML="0";
             H2.innerHTML=langh.substring(0,1);
        }
        else{
            H1.innerHTML=langh.substring(0,1);
            H2.innerHTML=langh.substring(1,2);
        }
        if (langm.length==1) {
             M1.innerHTML="0";
             M2.innerHTML=langm.substring(0,1);
        }
        else{
            M1.innerHTML=langm.substring(0,1);
            M2.innerHTML=langm.substring(1,2);
        }

        if (langs.length==1) {
             S1.innerHTML="0";
             S2.innerHTML=langs.substring(0,1);
        }
        else{
            S1.innerHTML=langs.substring(0,1);
            S2.innerHTML=langs.substring(1,2);
        }

        deg+=360;
         H1.style.webkitTransform="rotateY("+deg+"deg)";
         M1.style.webkitTransform="rotateY("+deg+"deg)";
        S1.style.webkitTransform="rotateY("+deg+"deg)";
         if(H2.innerHTML==0)
        {
            degg+=360;
           H1.style.webkitTransform="rotateY("+degg+"deg)";
        }
        if(M2.innerHTML==0)
        {
            degg+=360;
           M1.style.webkitTransform="rotateY("+degg+"deg)";
        }

        if(S2.innerHTML==0)
        {
            degg+=360;
           S1.style.webkitTransform="rotateY("+degg+"deg)";
        }
         document.getElementById("dian1").style.webkitTransform="rotateY("+deg+"deg)";    

     document.getElementById("dian2").style.webkitTransform="rotateY("+deg+"deg)";    

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