css로 3D 효과를 주기 위해서 가장 중요한 것이 perspective다. 투영점, 원근감 등의 의미이며 3D 환경을 만들기 위해서 깊이감을 주어 입체감을 부여하는 것이다.
픽셀 기반의 길이 값을 지정할 수 있으며, z축을 따라 캔버스로부터 관찰자의 깊이감을 나타내게 된다.
그래서 perspective(300px)는 스크린으로부터 300px 만큼 떨어진 곳에 관찰자가 있다는 것을 근거로 3D 환경을 구성하게 된다.
transform-style : preserve-3d;
자식요소들을 3D 공간에서 묘사하기 위해 부모 요소에 적용시키는 속성이다. 기본 값은 flat으로 2D의 2차원에서 부모 요소와 동일한 평면에 배치된다.
perspective-origin
perspective의 기준점을 지정해주는 속성이다.
perspective-origin: center/top/left/right
backface-visibility
뒤집어진 뒷면이 보여질지 안보여질지 결정한다.
backface-visibility:visible/hidden
참고 사이트
https://gahyun-web-diary.tistory.com/80
[CSS]transform(3D) 에서 함께 사용할 속성 perspective(원근법)과 backface-visibility(뒷면가시성)
perspective perspective를 사용했을때와 안했을 때의 차이를 마우스를 올려 확인해보세요. See the Pen css-transform3d-translate by gahyun (@gahyun) on CodePen. perspective를 사용하지 않으면 translateZ의..
gahyun-web-diary.tistory.com
https://webclub.tistory.com/486
CSS3 3D effect(perspective) #1
CSS3 3D 효과 CSS3 에서 가장 주목을 끌만한 것은 3D 와 관련된 자연스러운 화면 효과입니다. 아직까지 이 3D 효과는 2D에서 사용되는 transform , translate 과 마찬가지로 브라우저의 호환성이 통일되지
webclub.tistory.com
'Frontend > CSS' 카테고리의 다른 글
| [CSS] em/rem (0) | 2021.07.30 |
|---|---|
| [CSS] 폰트 파일 적용시키기 @font-face (1) | 2021.07.23 |
| [CSS]가상 클래스/ 가상 요소 (0) | 2021.07.06 |
| 버블이 움직이는 background css animation (0) | 2021.07.01 |
| [CSS]변수 사용하기 (0) | 2021.06.30 |
