CSS 관점의 작동 방식

CSS 애니메이션 애호가는 종종 강력한 관점 도구를 사용합니다. 관점 속성 자체는 3D 효과를 얻을 수 없지만 (기본 모양은 깊이가 없기 때문에) transform 속성을 사용하여 3D 공간 (x, y 및 z 축)에서 물체를 움직이고 회전시킨 다음 관점을 사용하여 깊이를 제어 할 수 있습니다.

이 기사는 기본부터 시작하여 관점의 개념을 점차 설명하며 마지막으로 완전한 3D 회전 큐브 애니메이션을 만듭니다.

원근 기본

우리는 단순한 녹색 정사각형으로 시작하여 3 축으로 움직입니다.

X와 Y 축에서 물체를 움직이는 것은 매우 간단하지만 Z 축에서 움직이면 정사각형이 동일하게 보입니다. 객체가 z 축에서 움직일 때 애니메이션이 우리에게 더 가깝게 가져오고 우리에게서 멀어 지지만 정사각형의 크기 (및 위치)는 동일하게 유지되기 때문입니다. CSS perspective 속성이 작동하는 곳입니다.

객체가 x 또는 y 축에서 움직일 때 원근법은 영향을 미치지 않지만, 원근법은 우리와 멀리 떨어져있을 때 정사각형을 더 크게 보이게 만듭니다. 그렇습니다. 실생활처럼.

객체를 회전 할 때도 동일한 효과가 발생합니다.

Z 축에서 정사각형을 회전시키는 것은 우리 모두가 익숙하고 사랑하는 정기적 인 회전처럼 보이지만 X 또는 Y 축의 사각형을 회전하면 (원근법을 사용하지 않고) 정사각형이 회전하지 않고 더 작아 지거나 좁아집니다. 그러나 관점을 추가하면 정사각형이 회전하면 정사각형의 닫기면이 더 크게 보이고 먼 쪽이 작게 보이고 회전이 예상대로 보입니다.

물체가 x 또는 y 축에서 90 °의 각도 (또는 270 °, 450 °, 630 ° 등) 각도로 회전하면보기에서 "사라집니다. 다시 말하지만, 이것은 우리가 물체에 깊이를 더할 수 없기 때문에이 위치에서 정사각형의 너비 (또는 높이)는 실제로 0이됩니다.

관점 가치

perspective 속성을 설정하려면 값을 사용해야합니다. 이 값은 객체 평면의 거리, 즉 관점의 강도를 설정합니다. 값이 클수록 물체에서 더 많이 나옵니다. 값이 작을수록 관점 효과가 더 명백합니다.

기원의 관점

perspective-origin 특성은 "관찰"객체의 방향을 결정합니다. 원점이 중앙에 있고 (기본값) 객체가 오른쪽으로 이동하면 왼쪽에서보고있는 것처럼 보입니다 (그 반대로).

또는 대상을 중심하고 perspective-origin 움직일 수 있습니다. 원점이 옆으로 설정되면 해당 측면에서 물체를 "관찰"하는 것과 같습니다. 값이 클수록 중심에서 더 많이 보입니다.

변환

perspective 과 perspective-origin 요소의 모 컨테이너에 설정되어 있으며 소실점의 위치 (즉, 객체를 객체 평면으로 "관찰하는 곳에서와 거리)의 위치를 ​​결정하지만, 객체 자체에 선언 된 transform 특성을 사용하여 객체의 변위와 회전이 설정됩니다.

이전 예제의 코드를 보면 정사각형을 한쪽에서 다른쪽으로 이동하면 translateX() 함수를 사용하는 것을 볼 수 있습니다. 이것은 X 축을 따라 이동하기를 원하기 때문에 의미가 있습니다. 그러나 transform 속성에 할당됩니다. 이 함수는 변환하려는 요소에 직접 적용되는 변환 유형이지만 동작은 부모 요소에 할당 된 관점 규칙을 준수합니다.

여러 기능을 "연결"하여 속성을 transform 할 수 있습니다. 그러나 여러 변환을 사용할 때는 고려해야 할 세 가지 매우 중요한 사항이 있습니다.

1. 물체가 회전하면 좌표계가 객체와 함께 변경됩니다.
2. 객체를 번역하면 부모 좌표가 아닌 자체 좌표계에 비해 움직입니다.
3. 이러한 값이 기록 된 순서는 최종 결과를 변경합니다.

이전 데모에서 원하는 효과를 얻으려면 먼저 X 축의 정사각형을 번역해야합니다. 그래야만 회전 할 수 있습니다. 역 순서 로이 작업을 수행하면 (먼저 회전하고 번역) 결과는 완전히 다릅니다.

속성을 transform 위한 가치 차수의 중요성을 강조하려면 몇 가지 간단한 예를 살펴 보겠습니다. 첫째, 그것은 두 개의 제곱의 간단한 2 차원 (2D) 변환으로, 둘 다 동일한 변환 값을 가지지 만 다른 선언 순서로 다음과 같습니다.

Y 축에서 제곱을 회전하더라도 마찬가지입니다.

값 순서는 중요하지만 값 순서를 변경하는 대신 원하는 결과를 얻기 위해 값 자체를 단순히 변경할 수 있습니다. 예를 들어……

 <code>transform: translateX(100px) rotateY(90deg);</code>

... 다음과 같은 효과 :

 <code>transform: rotateY(90deg) translateZ(100px);</code>

이것은 첫 번째 행에서 객체를 회전시키기 전에 x 축의 객체를 이동했지만 두 번째 행에서 객체를 회전시키고 좌표를 변경 한 다음 z 축 으로 이동했기 때문입니다. 동일한 결과, 다른 값.

더 흥미로운 것을 보자

물론, 사각형은 관점의 일반적인 개념을 설명하는 좋은 방법이지만, 우리가 그것을 3 차원 (3D) 모양으로 분해하면 관점이 어떻게 작동하는지 실제로 알 수 있습니다.

지금까지 다룬 모든 것을 사용하여 3D 큐브를 만들어 봅시다.

HTML

우리는 .cube 요소를 중심으로 회전 .cube .container 요소를 만들 것입니다.

<div class="container">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
</div>

보편적 인 CSS

먼저, .container 요소에 어떤 관점을 추가합니다. 그런 다음 .cube 요소의 측면 길이가 200px이고 3D 변환을 준수해야합니다. 여기에 몇 가지 표현식 스타일을 추가했지만 주요 속성이 강조 표시됩니다.

 /* 관점이있는 부모 컨테이너*/
.Container {
  너비 : 400px;
  높이 : 400px;
  테두리 : 2px 솔리드 흰색;
  Border-Radius : 4px;
  디스플레이 : Flex;
  정당화 컨텐츠 : 센터;
  정렬 구조 : 센터;
  관점 : 800px;
  원근법-오른쪽 : 오른쪽;
}

/* 어린이 요소, 3D 변환 유지*/
.cube {
  위치 : 상대;
  너비 : 200px;
  높이 : 200px;
  변환 스타일 : Preserve-3D;
}

/* 큐브 표면, 절대 포지셔닝*/
.옆 {
  위치 : 절대;
  너비 : 100%;
  높이 : 100%;
  불투명도 : 0.9;
  테두리 : 2px 솔리드 흰색;
}

/* 큐브 얼굴 배경색, 작업 시각화에 도움이*/
.front {배경색 : #d50000; }
.Backing {배경색 : #aa00ff; }

.Left {배경색 : #304ffe; }
.right {배경색 : #0091ea; }

.TOP {배경색 : #00BFA5; }
.Bottom {배경색 : #64dd17; }

표면을 변경하십시오

앞면이 가장 쉽습니다. 우리는 그것을 100px로 앞으로 움직입니다.

 .앞쪽 {
  배경색 : #D50000;
  변환 : Translatez (100px);
}

translateZ(-100px) 추가하여 큐브 뒷면을 뒤로 이동할 수 있습니다. 또 다른 방법은 180deg 측면을 회전시키고 앞으로 나아가는 것입니다.

 .뒤쪽에 {
  배경색 : #aa00ff;
  변환 : translatez (-100px);

  /* 또는 */
  /* 변환 : Rotatey (180deg) Translatez (100px); */
}

뒷면과 마찬가지로 왼쪽과 오른쪽을 여러 가지 방법으로 변형시킬 수 있습니다.

 .왼쪽 {
  배경색 : #304ffe;
  변환 : Rotatey (90deg) Translatez (100px);

  /* 또는 */
  /* 변환 : TranslateX (100px) Rotatey (90deg); */
}

.오른쪽 {
  배경색 : #0091EA;
  변환 : Rotatey (-90deg) translatez (100px);

  /* 또는 */
  /* 변환 : TranslateX (-100px) Rotatey (90deg); */
}

상단과 하단은 약간 다릅니다. Y 축에서 회전 할 필요가 없으며 X 축에서 회전해야합니다. 다시 한 번, 여러 가지 방법으로 수행 할 수 있습니다.

 .맨 위 {
  배경색 : #00BFA5;
  변환 : rotatex (90deg) translatez (100px);

  /* 또는 */
  /* 변환 : translatey (-100px) rotatex (90deg); */
}

.맨 아래 {
  배경색 : #64dd17;
  변환 : rotatex (-90deg) translatez (100px);

  /* 또는 */
  /* 변환 : Translatey (100px) rotatex (90deg); */
}

이것은 당신에게 3D 큐브를 제공합니다!

다른 perspective 과 perspective-origin 옵션을 시도하고 그들이 큐브에 어떤 영향을 미치는지 확인하십시오. "올바른"값은 없으며, 이러한 값은 애니메이션, 객체의 크기 및 달성하려는 효과에 따라 항목에 따라 다릅니다.

transform-style 에 대해 이야기합시다

우리는 큐브에 멋진 애니메이션을 추가하지만 먼저 transform-style 속성에 대해 논의합시다. 일반 CSS에서 전에 추가했지만 실제로 그것이 무엇인지 또는 무엇을하는지 설명하지 않습니다.

transform-style 속성에는 두 가지 값이 있습니다.

• flat (기본값)
• preserve-3d

우리가 속성을 preserve-3d 으로 설정할 때, 그것은 두 가지 중요한 일을합니다.

1. 그것은 큐브의 얼굴 (어린이 요소)이 큐브와 같은 3D 공간에 있다고 지시합니다. preserve-3d 하지 않으면 기본값이 flat 하고 큐브 평면에서 얼굴이 평평합니다. 큐브의 관점을 자식 요소 (얼굴)로 " preserve-3d "하고 큐브 만 회전 할 수있게하므로 각면을 별도로 애니메이션 할 필요가 없습니다.
2. DOM에서의 위치 에 관계없이 3D 공간에서의 위치 에 따라 아동 요소를 표시합니다.

이 예에는 녹색, 빨간색 및 파란색의 세 가지 제곱이 있습니다. 녹색 정사각형의 translateZ 값은 100px이므로 다른 사각형 앞에 있습니다. 파란색 사각형의 translateZ 값은 -100px입니다. 이는 다른 사각형 뒤에 있음을 의미합니다.

그러나 DOM에서는 사각형의 순서는 녹색, 빨간색, 파란색입니다. 따라서 transform-style flat 하게 설정되거나 전혀 설정되지 않으면 파란색 사각형이 상단에 표시되고 Green Square는 DOM의 순서이기 때문에 뒤에 있습니다. 그러나 transform-style preserve-3d 로 설정하면 3D 공간에서의 위치에 따라 렌더링됩니다. 결과적으로 녹색 광장이 앞에 있고 파란색 사각형이 뒤쪽에 있습니다.

생기

이제 큐브를 애니메이션하자! 더 흥미로운 일을하기 위해 세 축 모두에 애니메이션을 추가합니다. 먼저 animation 속성을 .cube 에 추가합니다. 우리는 아직 애니메이션 키 프레임을 정의하지 않았기 때문에 아직 아무 것도하지 않을 것입니다. 그러나 우리가 할 때, 그것은 제자리에 있습니다.

 애니메이션 : cuberotate 10s 선형 무한;

지금은 키 프레임입니다. 우리는 기본적으로 각 축을 따라 큐브를 회전하여 공간에서 구르는 것처럼 보입니다.

 @keyframes cuberotate {
  {transform : rotatey (0DEG) ROTATEX (720DEG) ROTATEZ (0DEG); }
  to {transform : rotatey (360deg) rotatex (0deg) rotatez (360deg); }
}

perspective 속성은 실제로 큐브 스크롤을 왼쪽과 오른쪽으로 보는 것처럼 전방 및 뒤로 보는 것처럼 애니메이션 깊이를 제공하는 속성입니다.

그러나 그 전에는 perspective 속성의 값이 일관성이 있었고 perspective-origin 도 마찬가지였습니다. 이 값을 바꾸는 것이 큐브의 모양에 어떤 영향을 미치는지 살펴 보겠습니다.

이 예제에 세 개의 슬라이더를 추가하여 다른 값이 큐브의 관점에 어떤 영향을 미치는지 알아 봅니다.

• 왼쪽의 슬라이더는 perspective 속성의 값을 설정합니다. 이 값은 객체 평면까지의 거리를 설정하므로 값이 작을수록 원근 효과가 더 명백합니다.
• 다른 두 슬라이더는 perspective-origin 특성을 나타냅니다. 오른쪽 슬라이더는 수직 축에서 원점을 위에서 아래로 설정하고 하단 슬라이더는 오른쪽에서 왼쪽으로 수평 축의 원점을 설정합니다.

큐브 자체가 회전 할 때 애니메이션이 실행될 때 이러한 변경 사항은 분명하지 않을 수 있지만, 실행 애니메이션 버튼을 클릭하여 애니메이션을 쉽게 끄질 수 있습니다.

이 값을 자유롭게 시도하고 그들이 큐브의 모양에 어떤 영향을 미치는지 확인하십시오. "올바른"값은 없으며, 이러한 값은 애니메이션, 객체의 크기 및 달성하려는 효과에 따라 항목에 따라 다릅니다.

다음 단계?

CSS의 perspective 속성의 기본 사항이 있으므로 상상력과 창의성을 사용하여 자신의 프로젝트에서 3D 객체를 만들고 버튼, 메뉴, 입력 및 "생명에 생명을주고 싶은"모든 것에 깊이와 재미를 추가 할 수 있습니다.

동시에, 복잡한 구조와 원근법 기반 애니메이션을 만들어 기술과 같은 기술을 연습하고 향상시킬 수 있습니다.

이 기사를 읽고 그 과정에서 새로운 것을 배우는 것을 즐겼기를 바랍니다! 의견을 남겨주십시오. 귀하의 생각을 알려주십시오.이 기사의 원근법이나 다른 주제에 대해 궁금한 점이 있으면 Twitter에 대한 의견을 남겨주세요.

위 내용은 CSS 관점의 작동 방식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!