[CSS] 버튼 treflip하기

 

Treflip Button(완성된 버튼)

Rotating Button

저는 여가 시간이 되면 스케이트 보드를 종종 타곤 하는데요.

스케이트 보드 탈 때 가장 신나는 순간은 새로운 트릭을 배우는 것이 아닐까 합니다.

 

트릭들은 기본적으로 띄우고 돌리는 두가지 특징을 가지고 생성됩니다.

이 두 특징을 이용해서 바닥과 평행하게 보드만 반 돌리면 Shuv-it (셔빗)
몸과 같이 반 돌면 방향에 따라 fs180, bs180 (프론트사이드 원-에이티, 백사이드 원-에이티)

보드 정면 방향에서 90도 방향으로 한바퀴 돌리면 kickflip( 킥플릭 ) 또는 heelflip ( 힐플립 )

라고 불리게 됩니다.

 

토니 호크의 21가지 스케이트 트릭

그리고, 두 개 이상의 트릭이 섞여서 새로운 트릭을 만들기도 하는데요.

킥플립과 셔빗 ( *한바퀴 돌리는 360 셔빗 ) 을 섞어서 만든게 treflip ( 트레플립 ) 입니다.

 

조니 기거의 트레플립 강좌

여기에서 착안해서,

마우스가 hover 했을 땐 킥플립,

클릭했을땐셔빗을 하게하여,

동시에 하면 treflip을 동작하게하는 버튼을 만들어 볼 예정입니다.

 

기본적인 원리는 이렇습니다.

css의 transform-3d를 이용하면 아래와 같은 3d 좌표를 이용해서 에니메이션을 구현 할 수 있는데요.

두개의 보드 (div ①, div ② )를 준비해서 하나는 앞면에 하나는 x좌표로 180도 돌려서 뒤에 배치해서

샌드위치처럼 위아래가 붙어있는 버튼을 만들고,
hover, active 이벤트에 따라 y축, z축으로 같이 돌리게하면 완성입니다.

 

 

그럼 먼저 html을 준비해봅시다.

<div class="btn">
  <div class="deck deck-front"> 
  </div>
  <div class="deck deck-back">
  </div>  
</div>

 

앞면에 있는 보드 하나

뒷면에 있는 보드 하나 

그리고 이 두 보드를 하나로 움직이게 해줄 부모 div로 구성 했어요.

 

여기까지 완성되었으면, 이미지 없이 박스로 도는 css를 구현해 봅시다.

 

.btn {
  height: 39px;
  width: 140px;
  transform-style: preserve-3d;
  transition: transform 300ms ease-in-out;
  
  background-color: #999;
}

.btn:hover {
  transform: rotateX(-360deg); 
}

.btn:active {
  transform: rotateZ(180deg);
}


.deck {
  position: absolute;
  width:100%;
  height:100%;
}

.deck-front {
  transform: translateZ(5px);
  background: #3D3;
}

.deck-back {
  transform: rotateX(180deg) translateZ(5px);
  background: #121;
}

codepen.io/znxkznxk1030/pen/QWdYWjy

QWdYWjy

 

 

.btn 클래스에서 .btn의

애니메이션 효과는 3d로지정하기 위해 transform-style을 preserve-3d로 설정하였습니다.

 

deck-front와 deck-back에서 보면 둘다 translateZ 5px을 하게했는데요. 이는 두 보드의 간격을 떨어트려 놓기 위함이에요.

deck-back에서 translateZ가 -5px이 아니고 5px이면 떨어트린게 아니라 둘다 같이 움직인게 아니냐 의문이 드실텐데요.

deck-back은 X축으로 180도 돌아 있기 때문에, 5px전진하면 deck-front기준으로는 후진 한 결과가 된겁니다.

 

그리고 마지막으로 .btn에 마우스 효과를 붙여서 마무리 했는데요.

hover일 경우에는 X축으로 돌게 해서 킥플립의 효과를 주었고요.

active일 경우에는 Z축으로 돌게해서 셔빗의 효과를 주어서 마무리 했습니다.

 

이렇게 되면, hover 이면서 active 될 경우 자연스럽게 두가지 트릭이 동시 발동되면서 Treflip 이되는 버튼이 완성되었습니다.

 

여기까지 완성된 코드에 앞뒤에 맞는 보드 이미지를 붙이면, 처음에 보았던 그 버튼이 완성되게 됩니다. 🤙

 

codesandbox.io/s/recursing-https-l6y4o?file=/index.html

recursing-https-l6y4o - CodeSandbox