CSS3は、Transformを使用して動く2D時計を作成します。

<div id="clock-wrap">
	<div id="時計">
    	<ul id="リスト">
        </ul>
    </div>
    <div id="num">
    	<ul>
        	<li>12</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
        </ul>
    </div>
    <div id="時間"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div id="circle"></div>
</div>

<style id="css">/*JavaScript で取得されたスタイル タグに id が追加され、それに css スタイルが追加されることに注意してください。 */
ボディ、ul{
	マージン:0;
	パディング:0;}
体{
	フォント:1em "マイクロソフト 弥平";
	色:#666;
	背景色:#333;}
h1{
	テキスト配置:中央;
	色:#eee;
	フォントサイズ:3rem;}
li{
	リストスタイル:なし;}
p{
	テキスト配置:中央;
	色:#ddd;
	位置:相対;
	上:100ピクセル;
	}
{
	色:#999;
	テキスト装飾:なし;
	遷移:0.2秒;}
ホバー{
	色:#ddd;}
#時計ラップ{
	幅:400ピクセル;
	高さ:400px;
	境界線:10px 実線 #fff;
	境界線の半径:50%;
	マージン:80px 自動 0;
	位置:相対;
	ボックスシャドウ:0 0 40px rgba(0,0,0,1)}
#時計 ul{
	幅:400ピクセル;
	高さ:400px;
	位置:相対;
	境界線の半径:50%;
	背景:放射状グラデーション(中心の円、#667eea、#764ba2);
	box-shadow:0 0 50px rgba(0,0,0,0.5) inset; /*内側の影を設定する*/
	}
#時計 ul li{
	位置:絶対;
	残り:50%;
	左マージン:-2px;
	トップ:0;
	幅:4px;
	高さ:10px;
	背景:rgba(255,255,255,.5);
	transform-origin:center 200px; /*li の回転中心は円の中央にあります。 */
	}
#clock li:nth-child(5n+1){ /* 5 つのスケールがグループを形成し、各グループの最初のスケールが長くなる必要があります。 */
	高さ:18px;
	}
#番号{
	位置:絶対;
	幅:360ピクセル;
	高さ:360ピクセル;
	左:0;
	右:0;
	トップ:0;
	下:0;
	マージン:自動;
	}
#num li{
	位置:絶対;
	残り:50%;
	左マージン:-10px;
	トップ:0;
	色:rgba(255,255,255,.5);
	フォント:2em Arial、Helvetica、サンセリフ;	
	変換の原点:center 180px;}

#時間、#分、#秒
	背景:#fff;
	位置:絶対;
	残り:50%;
	上位:50%;
	transform-origin:bottom; /* 時針の回転点は下にあります。 */
	ボックスシャドウ:0 0 6px rgba(0,0,0,.5)
	}
＃時間{
	幅:14px;
	高さ:100px;
	左マージン:-7px;
	上マージン:-100px;
	境界線の半径:3px;
	}
#分{
	幅:10px;
	高さ:150px;
	左マージン:-5px;
	上マージン:-150px;
	境界線の半径:2px;
	}
#秒{
	幅:4px;
	高さ:180ピクセル;
	左マージン:-2px;
	上マージン:-180px;
	境界線の半径:1px;
	}
＃丸{
	幅:40px;
	高さ:40px;
	境界線の半径:50%;
	背景:#fff;
	位置:絶対;
	残り:50%;
	左マージン:-20px;
	上位:50%;
	上マージン:-20px;
	ボックスシャドウ:0 0 20px rgba(0,0,0,.4)}
</スタイル>

<スクリプト>
window.onload = 関数(){
	var oList = document.getElementById("リスト");
	var oCSS=document.getElementById("css"); //スタイル タグは id 属性を追加することもできます。
	var aNums = document.getElementById("num").getElementsByTagName("li");
	var oHour = document.getElementById("時間");
	var oMin = document.getElementById("min");
	var oSec=document.getElementById("sec");
	var aLi="";
	var sCSS="";
	for(var i=0;i<60;i++){ //60 回ループして、各スケールのスケール値と回転度を生成します。
		aLi+="<li></li>";
		sCSS+="#clock li:nth-child("+(i+1)+"){transform:rotate("+i*6+"deg);}"
		}
	(var i=0;i<12;i++){
		sCSS+="#num li:nth-child("+(i+1)+"){transform:rotate("+i*30+"deg);}"
		}
	oList.innerHTML=aLi;
	oCSS.innerHTML+=sCSS; //css を元の CSS ドキュメントに追加する必要があります。
	
	
	
	myTime(); //初期化関数。
	setInterval(myTime,1000); // 1 秒ごとに関数を実行するようにタイマーを設定します。
	関数myTime(){
		var oDate=新しいDate();
		var iSec=oDate.getSeconds(); 
		// 秒単位の精度で分を表示します。
		var iMin=oDate.getMinutes()+iSec/60; 
		//時間は分と秒まで正確です。回転時に精度を上げることができます。
		var iHour=oDate.getHours()+iMin/60;
		
		oSec.style.transform="rotate("+iSec*6+"deg)";
		oMin.style.transform="rotate("+iMin*6+"deg)";
		oHour.style.transform="rotate("+iHour*30+"deg)"; // 時針の方向を正確にするには、分と秒を含める必要があります。
		}
	
	}
</スクリプト>