[CSS] 3D

 

◽️ 카드 만들기

.contents-place {
  .card {
    // ...
    transition: 1s;
    transform: rotateY(0deg); // 미리 준비시켜야 성능에 좋다.
    transform-origin: left; // 변경이 일어나는 위치를 바꿀 수 있다.
  }

  &:hover {
    .card {
      transform: rotateY(180deg);
    }
  }
}

 

이렇게 움직일 수 있다.

 

 

 

 

 

◽️ 카드 만들기2

.contents-place {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 500px;

  .card {
    position: relative;
    width: 60px;
    height: 100px;
    transform: rotateY(0deg);
    transition: 1s;
    transform-style: preserve-3d;
  }

  .card-side {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;

    &-front {
      z-index: 1;
      background-color: #7a72dd;
    }

    &-back {
      transform: rotateY(180deg);
      background-color: #fff;
    }
  }

  &:hover {
    .card {
      transform: rotateY(180deg);
    }
  }
}

backface-visibility: hidden;
-webkit-backface-visibility: hidden; // 나중에 작성해준다.

 

 

앞면 뒷면 뒤집기

 

 

 

 

 

 

---

 

 

 

 

 

출처

인터랙티브 웹 개발 제대로 시작하기 - 인프런 | 강의