css 속성 연습 : 3D 회전 판

🥥 perspective

perspective
: 원근감. 값이 크면 원근감이 커지고 작아지면 가깝게 느껴짐
: px, em 등으로 단위 입력
[CSS]transform(3D) 에서 함께 사용할 속성 perspective(원근법)과 backface-visibility(뒷면가시성)

---

🥥 transform

transform : 개체의 모양을 변형 혹은 회전등의 외곡을 줄 수 있는 속성
CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

---

🥥 해보자!

1. 제자리에서 오른쪽으로 빠르게 회전하는 보라색 판
2. 오른쪽으로 둥글게 회전하는 초록색 판
3. 제자리에서 왼쪽으로 회전하며 튀어나오는 주황색 판

<style>
  .scene1 {
    width: 200px;
    height: 200px;
    border: 1px solid rgb(139, 75, 75);
    margin: 40px;
    /* 원근감-숫자가 커질수록 멀리서 보는 느낌이 남 */
    perspective: 600px;
  }
  .panel1 {
    width: 100%;
    height: 100%;
    background: rgb(171, 171, 248);
    /* 기본적으로 45도 기울어서 보이게끔 함*/
    transform: rotateY(45deg);
    /* 뒤집히는 속도-클수록 느리고 작을 수록 빠름 (ex.1s는 느리게 0.2s는 빠르게 뒤집힘)*/
    transition:0.2s;
    /* 뒤집어서 뒷면을 보이게 할 것인가? 안보이게 할거면 hidden */
    backface-visibility : visible;
  }
  .panel1:hover{
    transform : rotateY(180deg);
    background-color: rgb(62, 58, 90);
  }

  .scene2 {
    width: 200px;
    height: 200px;
    border: 1px solid rgb(139, 167, 135);
    margin: 40px;
    perspective: 600px;
  }
  .panel2 {
    width: 100%;
    height: 100%;
    background: rgb(202, 248, 171);
    transform: rotateY(30deg);
    transition:1s;
    backface-visibility : visible;
  }
  .panel2:hover{
    /* 코드는 순서대로 작동하기 때문에 translateZ을 먼저 실행하고 뒤집는 것과
       뒤집고 translateZ를 실행하는 것은 다른 결과 */
    /* 뒤집히면서 z축이 200px 이동하기 때문에 뒤로 빠져보이는 효과 */
    transform : rotateY(180deg) translateZ(200px) ;
    background-color: rgb(61, 90, 58);
  }


  .scene3 {
    width: 200px;
    height: 200px;
    border: 1px solid rgb(251, 163, 0);
    margin: 40px;
    perspective: 600px;
  }
  .panel3 {
    width: 100%;
    height: 100%;
    background: rgb(248, 215, 171);
    transform: rotateY(30deg);
    transition:1s;
    backface-visibility : visible;
  }
  .panel3:hover{
    /* 200px 앞으로 이동하면서 뒤집히기 때문에 앞으로 튀어나오는 것 같은 효과*/
    transform : translateZ(200px) rotateY(180deg) ;
    background-color: rgb(121, 106, 89);
  }
</style>

<div class="scene1">
  <div class="panel1"></div>
</div>

<div class="scene2">
  <div class="panel2"></div>
</div>

<div class="scene3">
  <div class="panel3"></div>
</div>

---