Transform-style 및 Perspective 속성

에서 주로 CSS3 Transform 속성 중의 transform-origin 속성의 사용을 소개했는데 사실 transform 속성에서 transform-origin 속성은 그 중의 하나일 뿐이므로 transform 속성을 철저히 이해해야 한다. 이것은 부족하고 다른 속성의 응용을 이해해야 한다.오늘 여러분과 함께 transform 중transform-style과 perspective 관련 속성의 사용을 탐구하겠습니다.
transform-style 속성transform-style 속성은 3D 공간에서 네스트된 요소가 표시되는 방법을 지정하는 3D 공간의 중요한 속성입니다.그는 주로 두 가지 속성 값이 있는데 그것이 바로 flat와 preserve-3d이다.transform-style 속성의 사용 문법은 매우 간단하다.

transform-style: flat | preserve-3d

여기서 flat 값은 기본값이며 모든 하위 요소가 2D 평면에 나타나는 것을 나타냅니다.preserve-3d는 모든 하위 요소가 3D 공간에서 렌더링됨을 나타냅니다.
즉, 한 요소에 transform-style 값을 flat로 설정하면 해당 요소의 모든 하위 요소가 해당 요소의 2D 평면에 플랫하게 표시됩니다.요소를 X축 또는 Y축 방향으로 회전하면 앞이나 뒤가 아닌 양의 Z축 위치에 있는 하위 요소가 요소의 평면에 표시됩니다.요소에 대해 transform-style 값이 preserve-3d로 설정된 경우 벤드펴기 작업을 수행하지 않고 그의 모든 하위 요소가 3D 공간에 있음을 나타냅니다.transform-style 속성은 부모 요소에 설정해야 하며 그 어떠한 끼워 넣은 변형 요소보다 높다.마지막으로 우리는 반전된 예를 활용하여 transform-style 속성에 대한 인상을 깊이 있게 한다.
HTML 템플릿

<div class="wrap"> <div class="spin"> <div class="rotate"> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> </div> </div> </div> <div class="wrap"> <div class="spin"> <div class="rotate three-d"> <img src="images/cardKingClub.png" alt="" width="142" height="200" /> </div> </div> </div>

CSS

.wrap { width: 500px; height: 300px; margin: 30px auto; position: relative; background: url(images/bg-grid.jpg) no-repeat center center; background-size: 100% 100%; } /*    */ @keyframes spin{ 0%{ transform:rotateY(0deg) } 100%{ transform:rotateY(360deg) } } .spin { width: 142px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -72px; margin-top: -101px; border: 1px dashed orange; cursor: pointer; transform-style: preserve-3d; } /*    */ .spin:hover{ animation:spin 5s linear infinite; } .rotate { background: url(images/cardKingClub.png) no-repeat center; background-size: 100% 100%;

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[220414_TIL] css transform vs positioning

css에서 element의 위치를 변경하는 방법 중에 transform과 positioning(top, left..) 가 있다. 둘 다 육안으로 보이는 결과화면은 같지만, 어떤 상황에서 무엇을 쓰는 게 더 적절할지 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Transform-style 및 Perspective 속성

좋은 웹페이지 즐겨찾기