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

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

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

번역3d()

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) 여기서 x=1, y=-1, z=1, 회전 각도 = 45도 .

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

-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);

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

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

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

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

지정된 값에 따라 회전이 눈에 띄지 않는 경우가 있습니다. 예를 들어 이것은 눈에 띄지 않을 것입니다. transform: rotate3d(0, 0, 0, 50deg);

관점

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

CSS3 전환 및 변환을 사용하여 애니메이션을 만드는 방법

변형 및 전환을 사용하여 CSS3로 흥미로운 애니메이션을 만들 수 있습니다. 변환은 한 상태에서 다른 상태로 요소를 변경하는 데 사용됩니다. 회전, 이동, 기울이기 등을 예로 들 수 있습니다.

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

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

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

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

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

왼쪽의 예는 약 800px로 설정되었습니다. 오른쪽의 관점은 훨씬 더 과감하며 200px로 설정되었습니다.

규모

scaleZ()

이것은 z축에 대한 값을 제공하여 3D 스케일 변환을 정의합니다. z축을 따라 크기만 조정되기 때문에 크기 조정 효과를 보여주기 위해서는 다른 기능이 필요합니다. 직사각형이 뷰어를 향해 어떻게 보이는지 그리고 그것이 실제로 어떻게 원근감을 나타내는지 확인하시겠습니까?

scale(Z)을 완전히 이해하려면 값을 가지고 놀아보면 값이 클수록 원근감이 "더 선명해지는" 것을 볼 수 있습니다.

왼쪽 예제의 값은 2이고 오른쪽 예제의 값은 8입니다.

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 */

Matrix3d()

2D 행렬은 6개의 값을 가질 수 있는 반면 3D 행렬은 16(4x4 행렬)을 사용할 수 있습니다! 모든 세부 사항을 다루면 매우 긴 게시물이 될 것이므로 이 개념을 더 탐구하고 싶다면 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 변환이 디자인에 새로운 차원을 가져다 주기를 바랍니다. 원근법을 활용하면 요소를 보다 입체적으로 보이게 할 수 있습니다. 전환과 함께 애니메이션을 만들 때 많은 가능성이 있습니다.