본문 바로가기

프론트엔드 공부/html css

css rotate , transform-origin으로 중심축 잡기

라인을 원의 중심축 기준으로 시계모양으로 돌리는 css 구문입니다.

animation 속성에 일정시간 반복되는 linear, infinite(무한)을 추가하고 

keyframe값으로 초기값 0% ~ 100% 각도를 360deg로 설정해주면 완성 :) !

.sec1 .circle .line {
  position: absolute;
  top: 51%;
  left: 75%;
  width: 27.775vh;
  height: 1px;
  background: #fff;
  animation:rot 3s linear infinite;
  transform-origin:bottom left;
}

@keyframes rot{
  0%{
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100%{
    transform: translate(-50%, -50%) rotate(360deg);
  }
}