要点：
1.外面的div的transform-origin改变并加上了旋转后，内面的div的布局也会相应改变，但内部的div的transform-origin不会继承祖先的（默认还是自己的中心点），同时平移的方向会根据祖先元素的旋转而相应改变（为什么在例子中要在所有的点外面套一个div？）
2.同一个div的transform属性只能有一个，多个属性要连着写，否则后写的回覆盖前面的
3.transform的两个属性的先后顺序是有区别的，平移后旋转和旋转后平移效果不同（时钟的刻度套先旋转，再沿着x轴方向平移r的距离）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.clock {
background-color: black;
border-radius: 50%;
width: 200px;
height: 200px;
position: relative;
margin: 30px auto;
border: 1px solid black;
}
.min,
.hour {
position: absolute;
left: 50%;
top: 50%;
}
.min-dot-inner,
.min-dot {
width: 5px;
height: 2px;
}
.hour-dot,
.hour-dot-inner {
width: 10px;
height: 5px;
}
.min-dot-inner,
.hour-dot-inner {
background-color: white;
}
.min-dot,
.hour-dot {
position: absolute;
left: 50%;
top: 50%;
transform-origin: left center;
}
.center-dot {
width: 10px;
height: 10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-5px, -5px);
border-radius: 50%;
background-color: white;
}
.s-line-wrapper,.m-line-wrapper,.h-line-wrapper{
position: absolute;
left: 50%;
top: 50%;
}
.s-line-wrapper{
width: 2px;
height: 60px;
transform: translate(-1px,-100%);
}
.m-line-wrapper{
width: 4px;
height: 50px;
transform: translate(-2px,-100%);
}
.h-line-wrapper{
width: 8px;
height: 40px;
transform: translate(-4px,-100%);
}
.s-line,.m-line,.h-line{
width: 100%;
height: 100%;
background-color: white;
transform-origin: bottom center;
}
</style>
<body>
<div class="clock">
<div class="min"></div>
<div class="hour"></div>
<div class="center-dot"></div>
<div class="s-line-wrapper">
<div class="s-line"></div>
</div>
<div class="m-line-wrapper">
<div class="m-line"></div>
</div>
<div class="h-line-wrapper">
<div class="h-line"></div>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
function createMin() {
let str = "";
let x, y, r, minDeg;
r = 80;
minDeg = 6;
for (let i = 0; i < 60; i++) {
str += `<div class="min-dot" style="transform:translate(0,-1px) rotate(${i * minDeg}deg)"><div style="transform:translate(95px,0)" class="min-dot-inner"></div></div>`;
}
$(".min").append(str);
}
function createHour() {
let str = "";
let x, y, r, minDeg;
r = 80;
minDeg = 30;
for (let i = 0; i < 12; i++) {
str += `<div class="hour-dot" style="transform:translate(0,-2.5px) rotate(${i * minDeg}deg)"><div style="transform:translate(90px,0)" class="hour-dot-inner"></div></div>`;
}
$(".hour").append(str);
}
function move() {
setInterval(function () {
// 获取当前时刻
var date = new Date();
var sec = date.getSeconds();
var min = date.getMinutes();
var hour = date.getHours();
// 计算各指针对应的角度
var secAngle = sec * 6; // s*6-90
var minAngle = min * 6 + sec * 0.1; // m*6+s*0.1-90
var hourAngle = hour * 30 + min * 0.5; // h*30+m*0.5 - 90
// 转动指针
$(".s-line").css("transform", "rotate(" + secAngle + "deg)");
$(".m-line").css("transform", "rotate(" + minAngle + "deg)");
$(".h-line").css("transform", "rotate(" + hourAngle + "deg)");
}, 1000)
}
createMin();
createHour();
move()
</script>
</html>
