3D transform 예제

before

 

hover

.box {
  width: 200px;
  height: 200px;
  background: dodgerblue;
}

.box:hover {
  transform: perspective(200px) rotateY(45deg);
  transform-origin: 0 50%;
}

 

perspective는 화면을 바라보는 사용자와 box의 거리를 의미한다.

transform-origin을 위처럼 설정해야 왼쪽 모서리를 축으로 설정할 수 있다.