[CSS] 공전하는 애니메이션 효과 (transform: rotate)

 

기본세팅

HTML

  <div class="outer">
    <div class="satellite_wrap">
      <div class="satellite_box satellite_box1">
        <p>1</p>
      </div>
      <div class="satellite_box satellite_box2">
        <p>2</p>
      </div> 
      <div class="satellite_box satellite_box3">
        <p>3</p>
      </div>
      <div class="satellite_box satellite_box4">
        <p>4</p>
      </div>
      <div class="satellite_box satellite_box5">
        <p>5</p>
      </div>
    </div>
  </div>

 

SCSS

.outer { width: 20rem; height: 20rem; position: relative; border: 2px solid #426190; border-radius: 50%; margin: 25% auto; }

.satellite_wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

.satellite_box {
  position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; animation: forwardRotate 8s linear infinite; text-align: center; line-height: 7rem;

  p { width: 7rem; height: 7rem; border: 2px solid #426190; border-radius: 50%; background: #fff; box-shadow: 2px 2px 10px 2px #b3b6da; font-size: 1rem; font-weight: bold; color: #426190; animation: reverseRotate 8s linear infinite; }
}

@keyframes forwardRotate {
  from { transform: rotate(0deg), translate(-50% -50%); }
  to { transform: rotate(360deg); }
}
@keyframes reverseRotate {
  from { transform: rotate(-0deg); }
  to { transform: rotate(-360deg); }
}

 

 

 

예제 1

top과 left 값이 같은 경우

 

.satellite_box1 {
  p { position: relative; top: 0%; left: 0%; }
}
.satellite_box2 {
  p { position: relative; top: 30%; left: 30%; }
}
.satellite_box3 {
  p { position: relative; top: 50%; left: 50%; }
}
.satellite_box4 {
  p { position: relative; top: 90%; left: 90%; }
}
.satellite_box5 {
  p { position: relative; top: 120%; left: 120%; }
}

 

예제 2

top만 입력하거나 left만 입력할 경우

 

.satellite_box1 {
  p { position: relative; top: 0%; left: 0%; }
}
.satellite_box2 {
  p { position: relative; top: 30%; left: 0%; }
}
.satellite_box3 {
  p { position: relative; top: 50%; left: 0%; }
}
.satellite_box4 {
  p { position: relative; top: 90%; left: 0%; }
}
.satellite_box5 {
  p { position: relative; top: 120%; left: 0%; }
}

 

.satellite_box1 {
  p { position: relative; top: 0%; left: 0%; }
}
.satellite_box2 {
  p { position: relative; top: 0%; left: 30%; }
}
.satellite_box3 {
  p { position: relative; top: 0%; left: 50%; }
}
.satellite_box4 {
  p { position: relative; top: 0%; left: 90%; }
}
.satellite_box5 {
  p { position: relative; top: 0%; left: 120%; }
}

 

예제 3

같은 거리에서 회전하는 경우

.satellite_box1 {
  p { position: relative; top: 30%; left: -12%; }
}
.satellite_box2 {
  p { position: relative; top: -14%; left: 30%; }
}
.satellite_box3 {
  p { position: relative; top: 5%; left: 77%; }
}
.satellite_box4 {
  p { position: relative; top: 80%; left: 20%; }
}
.satellite_box5 {
  p { position: relative; top: 60%; left: 80%; }
}

 

퍼센트값이 아름답게 떨어지지 않으나 중심이 되는 요소와, 회전하는 요소의 크기가 매번 다르기 때문에 개발자도구에서 일일이 수정해야 한다.