프론트엔드 공부/html css
css rotate , transform-origin으로 중심축 잡기
maggieH
2021. 5. 1. 22:40
라인을 원의 중심축 기준으로 시계모양으로 돌리는 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);
}
}