CSS의 3D 변환 기능

키 테이크 아웃

CSS 3D 변환 함수는 수평 x 축, 수직 y 축 및 깊이 z 축의 3 가지 차원에서 HTML 요소를 조작 할 수 있습니다. 여기에는 rotatex (), rotatey (), rotatez (), translate3d (), translatez (), scale3d () 및 perspective ()와 같은 함수가 포함됩니다. CSS의 변환 속성에는 요소에 변환을 적용하기 위해 하나 이상의 함수를 할당 할 수 있습니다. 다중 변환은 공간 분리 된 함수로 정의 할 수 있습니다. 기본적으로 플랫으로 설정된 변환 스타일 속성은 3D 공간에 자식 요소를 배치하기 위해 3D를 보존하도록 설정할 수 있습니다. CSS 3D 변환은 모든 최신 브라우저에서 지원되지만 몇 가지 예외가 있습니다. 예를 들어, Internet Explorer는 Transform 스타일 : Preserve-3D를 지원하지 않으므로 3D 장면을 만들 수 없습니다. Safari는 후면면을 숨기기 위해 공급 업체 준비된 -webkit-backface-visibility를 사용해야합니다. CSS 3D 변환의 관점 속성은 객체가 뷰어로부터 얼마나 멀리 떨어져 있는지 정의하여 깊이의 환상을 만듭니다. 관점 길이가 작을수록 소실점이 가까워지고 3D 효과가 더 두드러집니다.

이 기사에서는 CSS의 새로운 3D 변환 기능 및 속성을 사용하여 웹 페이지와 응용 프로그램에 다른 차원을 추가하는 방법을 보여줍니다. 우리는 Z-Index, Browser Gotchas 및 이러한 기능에 대한 최상의 사용 사례와 관련된 문제와 함께 Transform, Translate, Rotation, Scaling, Perspective 등을 살펴볼 것입니다. html 요소는 3 차원으로 변환 될 수 있습니다 :

수평 x 축 수직 y 축 및 깊이 z 축

2 차원 스크린에서 표면이 z 코디네이트 제로에 있다고 생각하는 것이 유용합니다. 양의 z- 값은 객체를 당신을 향해 (화면 앞)로 이동하는 반면 음의 z 값은 물체를 (화면 뒤) 멀리 움직입니다. 원근감이 추가되면 더 먼 z 값으로 인해 물체가 완전히 사라질 수 있습니다. 여기에 주목해야 할 사항이 있습니다
• CSS는 3 차원 공간에서 2 차원 HTML 요소 만 변환 할 수 있습니다. 요소 자체는 평평하게 유지되며 깊이가 없습니다. z 평면에서 스케일링 할 수는 있지만
• > 정사각형을 큐브에 넣지는 않습니다. 여전히 큐브를 만들 수 있지만 각면을 만들려면 6 개의 요소가 필요합니다.
CSS 3D 변환은 페이지 효과에 적합하지만 다음 마인 크래프트 또는 Call of Duty를 만들 수있을 것으로 기대하지는 않습니다. 복잡한 모델은 WebGL과 같은 기술을 사용하여 더 잘 구현됩니다.
모든 현대식 브라우저 (IE10)에는 3D 변환이 잘 지원됩니다.
Internet Explorer는 변환 스타일 : Preserve-3D를 지원하지 않으므로 3D 장면을 만들 수 없습니다. 모든 버전의 Safari는 벤더-프리 픽스 -webkit-backface-visibility를 사용하여 후면면을 숨겨야합니다. 다른 모든 브라우저는 Backface-visibility를 지원합니다
• 다음 섹션에서는 3D 변환 특성 및 기능을 설명합니다. 데모 페이지는 대부분의 사용 방법을 보여줍니다 변환 속성 모든 요소는 단일 변환 속성을 적용 할 수 있습니다. 하나 이상의 매개 변수가있는 함수를 할당 할 수 있습니다. 예를 들면 :
• 둘 이상의 변환이 필요한 경우, 공간 분리 된 함수의 수는 다음을 정의 할 수 있습니다.
예를 들어 수평 평면에서 스케일링하고 수직으로 변형하려면 다음과 같습니다.
<:> 마지막으로 변환 : 없음; 기존의 모든 변환을 제거합니다 번역 (움직임) 함수 당신은 변환 함수를 사용하여 x 축을 따라 수평으로 또는 y 축을 따라 수평으로 요소를 움직일 수 있습니다 :

모든 길이 장치를 사용할 수 있습니다. 백분율 변환 된 요소의 크기를 참조하므로 Translatey (80%)가있는 100px 높이 블록은 80 픽셀로 아래로 이동합니다. 3 차원으로 이동하면 Translatez를 사용할 수도 있습니다.

#box1, #box2 및 #box3의 세 가지 요소가 주어졌으며, 동일한 장소에 절대적으로 배치되어 #box2에 적용되고 Translatez (-400px)가 #box3에 적용됩니다. 결과는 상당히 영감을 얻지 못한다 :

그러나 전체 외부 #scene 컨테이너를 회전하면 z 축 변환이 더욱 분명해집니다.

<span><span>.element</span> {
</span>  <span>transform: function1(parameter1, [...parameterN]);
</span><span>}
</span>

속기 변환 3D 함수는 요소를 세 축 모두에 따라 움직일 수있게합니다.

변환 스타일 속성 기본적으로 (그리고 항상 IE) 변환 스타일이 평평하게 설정됩니다. 이것은 요소의 모든 변형 된 어린이가 요소 자체의 평면에 있음을 나타냅니다. 다시 말해서, 내부 요소는 변환을 적용 할 수 있지만 컨테이너의 평평한 평면으로 스쿼시 될 것입니다.

<span><span>.element</span> {
</span>  <span>transform: function1(p1, [...pN]) function2(p1, [...pN]);
</span><span>}
</span>

대부분의 상황에서 변환 스타일 : Preserve-3D; 아동 요소가 3D 공간에 위치하고 컨테이너의 변형이 그에 따라 변형 될 것임을 나타내는 데 사용해야합니다.

. 회전 함수 2d rotate () 함수는 실제로 z 축 주위의 요소를 회전시키고 rotatez ()와 동일합니다. 예를 들면 :

<span><span>.element</span> {
</span>  <span>transform: scaleX(2) translateY(50px);
</span><span>}
</span>

rotatex ()는 수평 축 주위로 회전하고 세로 주위의 회전 (). 각도는 다음과 같이 정의 할 수 있습니다

회전 - 예 : 0.5 회전은 시계 방향으로 반 턴입니다 deg -도, 예 : 90deg는 시계 방향으로 1/4 턴입니다 rad - 라디안 (예 : -3.1416RAD는 반 시계 방향으로 반 턴입니다 대학원 - 그라디언. 한 번의 전체 턴은 400grad이므로 -200grad는 반 시계 방향으로 반 턴입니다.
• ROTATE3D () 함수로 3 개의 회전 축을 설정할 수 있습니다. 다소 혼란스럽게도 벡터를 설명하는 네 가지 값을 받아들입니다.
x-회전 축 (0 ~ 1)을 나타내는 벡터의 X- 코디네이션. y-회전 축 (0 ~ 1)을 나타내는 벡터의 y 좌표. z-회전 축 (0 ~ 1)을 나타내는 벡터의 z- 좌표. a - 회전 각도. 양의 각도는 시계 방향 회전을 나타내고 음수는 시계 반대 방향입니다.
수학 마조히스트는 mdn에서 rotate3d ()의 전체 세부 사항을 읽을 수 있습니다. 스케일링 (크기) 함수 함수 scalex () 및 scaley ()는 수평 및 수직 평면의 요소를 스트레칭 또는 축소하여 :
scalez ()는 깊이 평면에서도 동일합니다. 위의 예에서 변환 : scalez (0.5); 따라서 각 요소 사이의 간격을 절반으로 줄입니다 scale3d (x, y, z) 함수는 한 명령의 모든 평면에서 스케일링을 적용 할 수 있습니다. 예를 들면 :

변환 원점 기본적으로 요소가 중앙 지점 주위에서 회전하고 조정됩니다. 이것은 최대 3 개의 공간 분리 된 값으로 변환-오리진을 설정하여 수정할 수 있습니다.

1 값 구문 : x 원점의 길이 또는 백분율. 중심 x 원점으로 y 원점을 설정하는 곳에서 단일 왼쪽, 중앙, 오른쪽, 상단 또는 하단 키워드를 사용할 수 있습니다. 2 값 구문 : x 및 y 기원. 길이, 백분율 또는 키워드를 사용할 수 있습니다 3 값 구문 : x, y 및 z 기원. z 값은 PX 또는 EM과 같은 길이 단위 일 수 있습니다.
• 하나의 원점을 움직이는 것은 다른 원점의 회전 평면에 영향을 미칩니다. 예를 들어, 변환-오리진 : 왼쪽 중심 0; 원점을 왼쪽 가장자리의 중심으로 이동합니다. 이것은 rotatey () 및 rotatez () 함수에 영향을 미칩니다 Backface Visibility 요소의 후면은 x 또는 y 축 주변에서 회전하면 90 이상이지만 어느 방향 으로든 270도 미만이 표시됩니다. 후면은 효과적으로 미러 이미지이며 기본적으로 볼 수 있습니다. 후면은 뒤쪽으로 가시성을 설정함으로써 숨겨 질 수 있습니다 : 숨겨진; - #box2 : 에 적용되는 경우
뒷면-가시성 : 숨겨진; 두 개의 요소가 카드의 전면과 뒷면을 보여 주지만 한 번에 하나만 볼 수있는 카드 플라이핑 애니메이션에 종종 사용됩니다.
• .

  관점 위에 표시된 예제는 관점을 적용하지 않습니다. Z 평면으로 더 깊이 이동 한 요소는 시청자의 어느 정도 떨어져 있더라도 같은 크기로 남아 있습니다. 관점 속성은 기본적으로 기본적으로 기본적이지만 모든 양의 길이로 설정할 수 있습니다. 예를 들면 :

  <span><span>.element</span> {
  </span>  <span>transform: function1(parameter1, [...parameterN]);
  </span><span>}
  </span>

  관점 길이가 작을수록 소실점이 가까워지고 3D 효과가 더욱 두드러집니다.

  

  관점 소실점 기본적으로 관점 소실점은 변형되는 요소의 중심에 있습니다. Perspective-Origin : x y;, 여기서 :

  를 설정하여 수정할 수 있습니다.

  x는 키워드 (왼쪽, 센터 또는 오른쪽) 또는 요소의 너비에 비해 백분율입니다 (0%, 50% 및 100%는 키워드와 같습니다). y는 키워드 (상단, 센터 또는 하단) 또는 요소의 높이에 비해 백분율입니다 (0%, 50% 및 100%는 키워드와 같습니다).

  <span><span>.element</span> {
  </span>  <span>transform: function1(p1, [...pN]) function2(p1, [...pN]);
  </span><span>}
  </span>

  왼쪽 소실점 :

  

  바닥 오른쪽 소실점 :

  시험, 변환 : perspective (200px)에 대한 perspective () 함수도 있습니다. 그러나 관점-오리진을 존중하는 것으로 보이지 않습니다 모두 함께 함께 마지막으로, 스케일링, 회전 및 변환은 단일 matrix3d ​​() 함수로 정의 될 수 있으며, 이는 3 차원 아핀 변환에 16 값이 필요합니다. 이것은 아마도 JavaScript에서 가장 잘 사용되며 기하학적 학위를 가진 사람들이 시도했습니다! CSS의 경우 변환 기능 목록이 더 읽기 쉽고 유지 관리 가능할 수 있습니다.

  추가 읽기 3 차원에서 작업하는 것은 개념적으로 어려울 수 있지만 CSS 변환은 객체 조작을보다 쉽게 ​​경로로 만들 수 있습니다. 데모 페이지는 속성과 기능이 함께 작동하는 방식을 이해하는 데 도움이되는 대화식 도구를 제공합니다. 가상 현실 시청자, 1 인칭 슈팅 게임, 이미지 갤러리 및 스타 워즈 스크롤 텍스트를 포함한 CSS 3D 변환의 놀라운 예를 찾을 수 있습니다. 많은 사람들이 일반적인 프로젝트에서 사용하지 않을 가능성이없는 개념 증명 시연입니다. 그러나, 미묘하고 점진적으로 강화 된 3D 효과는 웹 페이지와 응용 프로그램에 다른 차원을 추가 할 수 있습니다.
  CSS를 사용하는 MDN 변환 CSS는 모듈을 변환합니다 CSS 3D 변환 소개
• CSS 3D 변환 함수
에 대한 질문이 자주 묻습니다 CSS의 기본 3D 변환 함수는 무엇입니까?
CSS 3D 변환 함수는 3 차원 공간에서 요소를 조작 할 수 있습니다. 기본 함수에는 rotatex (), rotatey (), rotatez (), translate3d (), translatez (), scale3d () 및 perspective ()가 포함됩니다. 각 함수는 요소에 고유 한 영향을 미칩니다. 예를 들어, rotatex ()는 x 축 주위의 요소를 회전시키고 Translatez ()는 z 축을 따라 요소를 움직입니다. 이러한 함수는 복잡한 3D 변환을 만들기 위해 결합 될 수 있습니다.

CSS 3D 변환에서 관점 () 함수는 어떻게 작동합니까?

CSS 3D 변환의 관점 () 함수는 객체의 얼마나 멀리 떨어져 있는지 사용자와 떨어져 있습니다. 3D 변환 요소에서 깊이와 관점의 환상을 만듭니다. 이 함수는 픽셀의 원근 값인 하나의 매개 변수를 취합니다. 낮은 값은 더 높은 값보다 더 뚜렷한 관점 효과를 만듭니다.

CSS의 여러 3D 변환 함수를 결합 할 수 있습니까? 이것은 변환 속성 내에서 공간으로 분리 된 각 함수를 나열하여 수행됩니다. 함수는 나열된 순서대로 적용됩니다. 이를 통해 회전, 변환 및 스케일링을 결합하여 복잡한 3D 효과를 만들 수 있습니다.

CSS에서 2D와 3D 변환의 차이점은 무엇입니까? CSS는 변환이 발생하는 차원입니다. 2D 변환은 x 및 y 축의 요소에 영향을 미치고 3D 변환에는 z 축이 포함되어 변환에 깊이가 추가됩니다. 이것은 3D 변환이 3 차원에서 회전, 이동 및 스케일을 만들 수 있음을 의미하여보다 몰입 형 및 동적 효과를 만듭니다.

CSS 3D 변환의 백 페이스 가시성을 어떻게 제어 할 수 있습니까?

CSS의 Backface-visibity 속성은 뷰어를 향하지 않을 때 요소의 뒷면이 보이는지 여부를 제어합니다. 이 속성은 요소가 회전하고 뒷면이 보이는 3D 변환에 특히 유용합니다. 이 속성은 뒷면을 보여주는“가시적”과 숨겨진“숨겨진”의 두 가지 값을 가져옵니다.

CSS 3D 변환에서 변환-오리핀 속성의 사용은 무엇입니까?

예, CSS 전환 또는 애니메이션을 사용하여 CSS 3D 변환을 애니메이션 할 수 있습니다. 이를 통해 사용자 경험을 향상시키는 부드럽고 점진적인 변환을 만들 수 있습니다. 각 CSS 속성을 사용하여 애니메이션의 지속 시간, 타이밍 기능 및 지연을 제어 할 수 있습니다.

모든 브라우저에서 지원되는 CSS 3D 변환은?

대부분의 최신 브라우저는 CSS 3D 변환을 지원합니다. 그러나 일부 이전 버전이 모든 기능을 완전히 지원하지 않을 수 있으므로 각 기능에 대한 특정 브라우저 지원을 확인하는 것이 좋습니다. CSS 3D 변환에 대한 현재 브라우저 지원을 확인하는 데 사용할 수있는 도구를 사용할 수 있습니다.

CSS 3D 변환을 사용하여 3D 플립 효과를 어떻게 만들 수 있습니까?

3D 플립 효과는 어떻게 될 수 있습니다. rotatey () 또는 rotatex () 함수를 전환과 결합하여 CSS 3D 변환을 사용하여 생성되었습니다. 회전 기능은 Y 또는 X 축 주위에 요소를 뒤집는 반면 전환은 뒤집는 애니메이션을 생성합니다. 전환 기간 및 전환 타이밍 기능 특성을 사용하여 플립의 속도와 타이밍을 제어 할 수 있습니다.

CSS 3D 변환의 matrix3d ​​() 함수는 무엇입니까?

Matrix3d ​​(Matrix3d). ) CSS 3D 변환의 함수를 사용하면 16 값을 포함하는 4 × 4 변환 행렬을 지정할 수 있습니다. 이 기능은 모든 3D 변환을 나타내므로 복잡한 3D 효과를 생성하는 강력한 도구가됩니다. 그러나 매트릭스 수학에 대한 깊은 이해가 필요하기 때문에 사용하는 것은 매우 복잡 할 수 있습니다.

위 내용은 CSS의 3D 변환 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!