刻一個時鐘的輪廓

HTML

<div class="clock">
  <div class="clock_inside"></div>
</div>

SCSS

%center{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

.clock{
	background:#666666;
	width: 400px;
	height: 400px;
	border-radius:50%;
	@extend %center;
	box-shadow:0px 0px 5px black;
	&_inside{
	  position: relative;
	  background:black;
	  width:90%;
	  height:90%;
	  border-radius:50%;
	  @extend %center;
	}
}

時鐘的刻度

時鐘共60個刻度，一個圓360度，除以60個刻度，每個刻度6度，先用css給出樣式，之後再利用js for迴圈動態加載出來

HTML

<div class="clock">
	<div class="clock_inside">
		<div class="scale">
			<div class="scale_unit"></div>
		</div>
	</div>
</div>

SCSS

.scale{
	position: relative;
	width: 100%;
	height: 100%;
	&_unit{
		position: absolute;
		transform:rotate(180deg)translateY(130px);
		transform-origin:0 0;
		top:50%;
		left:50%;
		width: 2px;
		height: 10px;
		background:#fff;
	}
}

transform-origin

transform-origin可以更改transform的預設位置，有兩個參數可以帶入設定(x , y)，預設的值為(50% , 50%)，將transform-origin:(0 , 0);再配合transform:rotate(??deg);就可以做出時針擺動效果

CSS沒有極限 - CSS transform-origin

時鐘刻度處理

利用for迴圈跑60次，產生每個刻度

const scale = document.querySelector('.scale');
let deg = 180; //起始位置度數
for(let i =0;i<60;i++){//總共60個刻度
  const unit = document.createElement('div'); //新增一個div容器
  unit.classList.add('scale_unit');//利用classList.add新增class上去
  unit.style.transform = `rotate(${deg}deg) translateY(170px)`; 
  
  deg += 6; //每次回圈後，新增6度達到一個圓的角度
  scale.appendChild(unit);  //在scale上利用appendChild新增每個刻度
}