CSS에 관점 가져오기

다른 날 나는 탐험을 시작했고 3D in CSS 주사위로 시작했습니다.
주사위는 3D에서 우수합니다. 그러나 원근감이 없으므로 3D에서 여전히 2D입니다.

이를 수정하고 3D에 약간의 관점을 가져오겠습니다.

주사위 위에서 회전을 멈추고 정면에서 보면 겹치는 부분을 볼 수 있지만 모든 면의 크기는 동일합니다.

후면 패널이 뒤쪽에 더 많이 위치하므로 더 작아야 하기 때문에 이것은 약간 이상합니다.

CSS 관점

그것이 바로 원근법 스타일이 작용할 수 있는 곳입니다.

body 태그에 다음 스타일을 적용해 보겠습니다.

body {
  perspective: 400px;
}

이미 엄청난 차이죠?

가치를 가지고 놀 수 있습니다. 아래로 내려갈수록 3D가 더 강렬해집니다.

또한 perspective-origin 를 얻습니다. 이것은 물체를 어느 각도에서 보고 있는지 정의할 수 있습니다.

기본값은 50% 50% 이며 위치에서 알고 있는 값을 사용하여 설정할 수 있습니다.

body {
  perspective-origin: left;
}

그러면 원근감이 왼쪽으로 설정됩니다.



보시다시피 이것은 약간 이상해지며 올바른 디스플레이를 얻기 위해 원근을 조금 더 크게 만들 수 있습니다.

원근법을 사용하면 3D CSS에 한 차원 높은 느낌을 줄 수 있습니다.

조절된 주사위로 자유롭게 놀아보세요.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나