CSS3 verwendet Transform, um eine bewegliche 2D-Uhr zu erstellen

<div id="Uhr-Wrap">
	<div id="Uhr">
    	<ul id="Liste">
        </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="Stunde"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div id="Kreis"></div>
</div>

<style id="css">/*Beachten Sie, dass dem Style-Tag eine ID hinzugefügt wird, die in JavaScript abgerufen wird und der CSS-Style hinzugefügt wird. */
Körper,ul{
	Rand: 0;
	Polsterung: 0;}
Körper{
	Schriftart:1em „Microsoft Yahei“;
	Farbe: Nr. 666;
	Hintergrundfarbe: #333;}
h1{
	Textausrichtung: zentriert;
	Farbe: #eee;
	Schriftgröße: 3rem;}
li{
	Listenstil: keine;}
P{
	Textausrichtung: zentriert;
	Farbe: #ddd;
	Position: relativ;
	oben: 100px;
	}
A{
	Farbe: Nr. 999;
	Textdekoration: keine;
	Übergang: 0,2 s;}
ein:schweben{
	Farbe: #ddd;}
#Uhr-Wrap{
	Breite: 400px;
	Höhe: 400px;
	Rand: 10px durchgezogen #fff;
	Randradius: 50 %;
	Rand: 80px automatisch 0;
	Position: relativ;
	Boxschatten: 0 0 40px rgba (0,0,0,1)}
#Uhr ul{
	Breite: 400px;
	Höhe: 400px;
	Position: relativ;
	Randradius: 50 %;
	Hintergrund: radialer Farbverlauf (Kreis in der Mitte, #667eea, #764ba2);
	box-shadow:0 0 50px rgba(0,0,0,0.5) inset; /*Inneren Schatten setzen*/
	}
#Uhr ul li{
	Position: absolut;
	links: 50 %;
	Rand links: -2px;
	oben: 0;
	Breite: 4px;
	Höhe: 10px;
	Hintergrund: rgba (255,255,255,.5);
	transform-origin:center 200px; /*li‘s Rotationszentrum liegt in der Mitte des Kreises. */
	}
#clock li:nth-child(5n+1){ /*5 Tonleitern bilden eine Gruppe, und die erste Tonleiter jeder Gruppe sollte länger sein. */
	Höhe: 18px;
	}
#num{
	Position: absolut;
	Breite: 360px;
	Höhe: 360px;
	links: 0;
	rechts:0;
	oben: 0;
	unten: 0;
	Rand: automatisch;
	}
#num li{
	Position: absolut;
	links: 50 %;
	Rand links: -10px;
	oben: 0;
	Farbe: rgba(255,255,255,.5);
	Schriftart: 2em Arial, Helvetica, serifenlos;	
	transform-origin:center 180px;}

#Stunde,#Min,#Sek
	Hintergrund:#fff;
	Position: absolut;
	links: 50 %;
	oben: 50 %;
	transform-origin:bottom; /*Der Rotationspunkt des Stundenzeigers befindet sich unten. */
	Kastenschatten: 0 0 6px rgba (0,0,0,.5)
	}
#Stunde{
	Breite: 14px;
	Höhe: 100px;
	Rand links: -7px;
	Rand oben: -100px;
	Rahmenradius: 3px;
	}
#min{
	Breite: 10px;
	Höhe: 150px;
	Rand links: -5px;
	Rand oben: -150px;
	Rahmenradius: 2px;
	}
#Sek{
	Breite: 4px;
	Höhe: 180px;
	Rand links: -2px;
	Rand oben: -180px;
	Rahmenradius: 1px;
	}
#Kreis{
	Breite: 40px;
	Höhe: 40px;
	Randradius: 50 %;
	Hintergrund:#fff;
	Position: absolut;
	links: 50 %;
	Rand links: -20px;
	oben: 50 %;
	Rand oben: -20px;
	Boxschatten: 0 0 20px rgba (0,0,0,.4)}
</Stil>

<Skript>
fenster.onload = funktion(){
	var oList = document.getElementById("Liste");
	var oCSS=document.getElementById("css"); //Das Style-Tag kann auch ein ID-Attribut hinzufügen.
	var aNums = document.getElementById("num").getElementsByTagName("li");
	var oHour = document.getElementById("Stunde");
	var oMin = document.getElementById("min");
	var oSec=document.getElementById("sec");
	var aLi="";
	var sCSS="";
	for(var i=0;i<60;i++){ //60-malige Schleife, um den Skalenwert und den Rotationsgrad jeder Skala zu generieren.
		aLi+="<li></li>";
		sCSS+="#clock li:nth-child("+(i+1)+"){transform:rotate("+i*6+"deg);}"
		}
	für(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 muss an das ursprüngliche CSS-Dokument angehängt werden.
	
	
	
	myTime(); //Initialisierungsfunktion.
	setInterval(myTime,1000); //Stellen Sie den Timer so ein, dass die Funktion jede Sekunde ausgeführt wird.
	Funktion meineZeit(){
		var oDate=neues Datum();
		var iSec=oDate.getSeconds(); 
		//Minuten mit Genauigkeit auf Sekunden.
		var iMin=oDate.getMinutes()+iSec/60; 
		//Stunden auf Minuten und Sekunden genau. Kann beim Drehen präziser sein.
		var iHour=oDate.getHours()+iMin/60;
		
		oSec.style.transform="drehen("+iSec*6+"Grad)";
		oMin.style.transform="drehen("+iMin*6+"Grad)";
		oHour.style.transform="rotate("+iHour*30+"deg)"; //Die Richtung des Stundenzeigers muss Minuten und Sekunden enthalten, um genau zu sein.
		}
	
	}
</Skript>