CSS3 변환 속성으로 3D 디자인을 만드는 방법

CSS3 변환 속성에는 2D와 3D라는 두 가지 차원이 있습니다. 애니메이션을 적용할 때 변환은 요소를 한 상태에서 다른 상태로 변경하는 데 사용됩니다. 이 튜토리얼은 2D 애니메이션에 대한 이 가이드의 확장 역할을 합니다. 3D 디자인에 대한 통찰력과 이러한 기본 개념을 결합하여 멋진 애니메이션을 만드는 방법을 제공하겠습니다.

3D 변환은 매우 상세할 수 있으며 여러 조각이 결합된 경우 복잡해질 수 있으므로 기본 빌딩 블록부터 시작하는 것이 도움이 됩니다. 이러한 개념 중 일부는 친숙해 보이지만 "z"는 3D로 작업할 때 새롭게 보일 것입니다. 3D 변환은 z축을 포함하도록 2D CSS 변환을 확장하여 DOM 요소의 3D 변환을 허용합니다.

Z축이란?

z축에 대한 참조가 많을 것입니다. 자신을 향하거나 멀어지는 측정 거리로 생각하기 쉽습니다. 양수 값이면 더 가깝습니다. 음수 값이면 더 멀리 떨어져 있습니다.

3D 변환 예제

3D 변환의 기본 속성은 translate3d , scale3d , rotateX , rotateY , rotateZ , perspective 및 matrix3d ​​입니다. translate3d , scale3d 및 matrix3d ​​에는 x,y 및 z에 대한 인수를 사용하기 때문에 더 많은 인수가 포함됩니다. scale 속성은 각도에 대한 값을 사용하고 원근감도 단일 값을 사용합니다.

번역하다

번역Z()

이것은 z축 값만을 사용하여 3D 변환을 정의합니다. 2D 번역에서 번역 x와 y를 기억할 수 있습니다. translateX() , translateY() 및 translateZ() 의 아이디어는 각각 올바른 축을 따라 지정된 거리만큼 요소를 이동하는 길이 값을 사용하기 때문에 동일합니다.

이 예에서 translateZ(-20px) 뷰어에서 20픽셀 떨어진 요소를 이동합니다.

다음은 이 예제를 만드는 코드 스니펫입니다.

 -webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);

translate3d()

translate3d() 함수는 3D 공간에서 요소의 위치를 ​​이동하는 데 사용됩니다. 이 변환은 각 방향으로 이동하는 정도를 정의하는 좌표를 지정하여 생성됩니다.

함수 transform: translate3d(20px, -15px, 70px); 이미지를 양의 x축을 따라 20픽셀, 음의 y축을 따라 15픽셀, 양의 z축을 따라 70픽셀 이동합니다.

다음은 translate3d 의 예입니다.

 -webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);

두 번째 사각형이 겹치는 부분이 있음이 꽤 분명합니다. 예상만큼 극적으로 보이지 않을 수 있지만 원근 속성을 추가하면(이 자습서의 뒷부분에서) 도움이 됩니다.

회전

rotate3d() 함수는 축을 중심으로 지정된 각도만큼 3D 공간에서 요소를 회전합니다. 이것은 rotate(x, y, z, angle) 로 쓸 수 있습니다.

회전X()

픽셀 값은 여기서 작동하지 않으며 도 ​​단위여야 합니다. rotateX() 메서드는 x축을 중심으로 지정된 각도로 요소를 회전합니다. 직사각형이 어떻게 더 짧은지 보십니까? x축을 따라 회전하고 있습니다. 이 예는 55도 회전을 보여줍니다.

 -ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);

회전Y()

rotateY() 메서드는 y축을 기준으로 요소를 회전합니다. 하단 직사각형이 상단만큼 넓지 않다는 것을 알 수 있습니까? 60도 회전하고 있기 때문에 위의 직사각형만큼 넓어 보이지 않도록 회전합니다.

 -ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);

회전Z()

rotateZ() 메서드는 지정된 각도만큼 z축을 중심으로 요소를 회전합니다. 이 경우 값은 120도입니다.

 -ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);

회전3d()

함수 rotate3d(1, -1, 1, 45deg) 이미지를 y축을 따라 45도 회전시킵니다. 음수 값을 사용하여 요소를 반대 방향으로 회전할 수 있다는 점에 유의해야 합니다.

단일 축 사양보다 더 복잡하기 때문에 rotate3d rotate3d(x,y,z,angle) 과 같이 분해할 수 있습니다. .

스타일을 지정하는 코드는 다음과 같습니다.

 -ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);

기본 테스트

x축을 따라 시계 방향으로 45도.

 transform: rotate3d(1, 0, 0, 45deg);

y축을 따라 시계 방향으로 45도.

 transform: rotate3d(0, 1, 0, 45deg);

z축을 따라 시계 방향으로 45도.

 transform: rotate3d(0, 0, 1, 45deg);

지정된 값에 따라 때때로 회전이 눈에 띄지 않을 수도 있다는 점을 언급할 가치가 있습니다. 예를 들어, 이것은 눈에 띄지 않을 것입니다: transform: rotate3d(0, 0, 0, 50deg);

관점

이것은 아마도 가장 "차원적인" 변환일 것입니다. 말 그대로 관점을 얻을 수 있는 곳입니다. 원근을 설정하지 않고 요소에 3D 변형을 적용하면 결과 효과가 3차원으로 나타나지 않습니다. 이는 위의 속성에도 추가할 수 있는 항목입니다.

3D 공간을 활성화하려면 요소에 원근감이 필요합니다. 이는 transform 속성 또는 perspective 속성을 사용하는 두 가지 방법으로 적용할 수 있습니다.

transform 속성은 다음과 같습니다. transform: perspective(600px); 그리고 perspective 속성은 다음과 같습니다: perspective: 600px; .

다음 예제에서는 둘 사이에서 변경하므로 코드를 자세히 살펴보십시오.

perspective 의 값은 3D 효과의 강도를 결정합니다. 큰 물체를 볼 때 느끼는 것과 같이 낮은 값은 실제로 눈에 띄는 것으로 생각하십시오. 값이 클수록 효과가 약해집니다.

소실점의 위치도 사용자 지정할 수 있습니다. CSS 관점과 관련이 있기 때문에 언급할 가치가 있고 많은 실험이 필요합니다. 기본적으로 3D 공간의 소실점은 중앙에 위치합니다. 소실점의 위치를 ​​변경하려면 perspective-origin 속성을 사용하십시오. 그것은 다음과 같이 보일 것입니다: perspective-origin: 15% 55% .

규모

스케일Z()

이것은 z축에 대한 값을 제공하여 3D 스케일 변환을 정의합니다. z축을 따라서만 크기가 조정되기 때문에 크기 조정 효과를 시연하려면 다른 기능이 필요합니다. 직사각형이 보는 사람을 향하고 있고 실제로 어떻게 원근감을 나타내는지 확인하세요.

scale(Z)을 완전히 이해하려면 값을 가지고 놀아보십시오. 그러면 값이 클수록 원근감이 "더 선명해집니다".

scale3d(x,y,z)

scale3d() 함수는 요소의 크기를 변경하고 scale(x, y, z) 로 작성됩니다. scaleZ 와 마찬가지로 perspective 와 함께 사용하지 않는 한 원근이 완전히 어떻게 보이는지 명확하지 않습니다.

이 예에서는 다음을 사용합니다.

 -ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);

참고 사항: 벡터의 세 좌표가 모두 같으면 크기 조정이 균일하고 눈에 띄는 차이가 없습니다.

 transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */

매트릭스3d()

2D 매트릭스는 6개의 값을 가질 수 있는 반면 3D 매트릭스는 16개(4×4 매트릭스)를 사용합니다! 모든 세부 사항을 다룬다면 매우 긴 게시물이 될 것이므로 이 개념을 더 탐색하고 싶다면 Codepen에서 이 대화형 matrix3d ​​실험을 적극 권장합니다.

matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

만드는 방법
3D 변환을 사용한 애니메이션

이제 기본 사항을 다루었으므로 대화형 애니메이션을 만드는 것이 다음 단계입니다. CSS3 변환 및 전환을 사용하여 요소는 회전, 크기 조정 또는 관점 추가를 통해 한 상태에서 다른 상태로 변경됩니다.

CSS 애니메이션을 처음 사용하는 경우 전환이 없으면 변환되는 요소가 한 상태에서 다른 상태로 갑자기 변경된다는 점을 아는 것이 중요합니다. 이를 방지하기 위해 전환을 추가하여 변경을 제어하여 더 부드럽게 보이게 할 수 있습니다.

카드 플립을 만드는 방법

누가 카드 놀이를 좋아하지 않습니까? 이 예는 양면 카드를 특징으로 하며 변형으로 뒤집으면 양면을 볼 수 있습니다. body 태그를 살펴보면 많은 효과가 perspective 속성에서 나옵니다. 500px로 설정되어 있습니다. 100px와 같은 더 낮은 값은 매우 "비뚤어져" 보입니다.

시작 HTML은 다음과 같습니다.

 <div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>

CSS는 이를 가능하게 합니다.

 body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); }

이것은 Codepen에서 찾을 수 있습니다.

변환을 처음 사용하는 경우 다음이 흥미로울 수 있습니다. transform: rotate(1turn); 이 유닛은 우리 카드에 완벽합니다. 왜냐하면 "턴" 유닛은 정확히 소리가 나는 것과 같기 때문에 하나의 완전한 원입니다.

또한 약간의 여유를 사용하여 사용자 정의 회전 방식을 만들었습니다. 이것은 transition: all 1s ease-in; .

스니펫의 또 다른 3D 속성은 transform-style: preserve-3d; . 이를 포함함으로써 요소가 상위 요소에 머물지 않고 3차원 공간에서 "스윙"할 수 있습니다.

3D 효과로 텍스트를 만드는 방법

이 예는 오래된 영화 포스터에서 영감을 받았습니다. 멋진 CSS 스타일을 활용할 수 있는 다양한 서체가 있으므로 고유한 서체 효과가 확실히 가능합니다. 이 텍스트는 고유한 변환을 제공하기 위해 rotate3d 및 transform3d 사용하고 있습니다.

HTML은 매우 간단합니다.

 <div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>

기본 CSS는 다음과 같습니다.

 .container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }

더 자세한 CSS와 예제는 Codepen에서 찾을 수 있습니다.

CSS 3D 변환이 디자인에 새로운 차원을 가져다주길 바랍니다. 원근법을 활용하면 요소를 입체적으로 보이게 할 수 있습니다. 전환과 결합하여 애니메이션을 만들 때 많은 가능성이 있습니다.