Rotating Navigation

네비게이션 클릭시 화면이 회전하면서 사이 공간에 메뉴들이 나올 수 있게 개발해보았다.

본문은 상단좌측 포인트를 중심으로 회전하기 때문에 transform-origin값을 top left로 주었다.

.container {
  background-color: #fafafa;
  transform-origin: top left;
  transition: transform .5s linear;
  width: 100vw;
  min-height: 100vh;
  padding: 50px;
}

.container.show-nav {
  transform: rotate(-20deg);
}

그리고 네비게이션 메뉴가 보일 수 있도록 translateX 를 이용해 이동시켰다

nav ul li {
  text-transform: uppercase;
  color: #fff;
  margin: 40px 0;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in;
}