10장 파노라마 회사 소개 페이지 제작하기

Iris·2021년 12월 13일
0
post-thumbnail

📖 최성일, ⌈Do it! 인터랙티브 웹 페이지 만들기⌋, 이지스퍼블리싱, 2021


각 박스를 3D 원통 형태로 배치하기

.wrap {
  width: 100vw;
  height: 100vh;
  perspective: 1300px; /* 원근감 지정 */
}

/* 3D 회전과 이동 */
.face1 {
  transform: rotateY(0deg) translateZ(-764px);
}
...

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

각 요소를 3D 형태로 배치하기 위해 transform 속성을 사용할 수 있고, 이를 의도대로 요소에 적용하려면 원근감을 주는 perspective 속성을 함께 지정해 주어야 한다는 것을 학습했다.

profile
👩🏻‍💻 Web Front-end Developer

0개의 댓글