당신이 알아야 할 CSS3 애니메이션 기술 (2)

저자：Eve Cole 업데이트 시간：2025-01-15 16:16:56

번역하다

"번역"이라는 이름은 약간 오해의 소지가 있습니다. 실제로는 X, Y 좌표값을 이용하여 요소의 위치를 지정하는 방식입니다.

인용된 내용은 다음과 같습니다.

#nav{
/* 이렇게 하면 nav 요소가 왼쪽으로 10픽셀, 아래로 20픽셀 이동됩니다 */
-moz-transform: 번역(10px, 20px);
-webkit-transform: 번역(10px, 20px);
}

브라우저 지원

번역 속성은 현재 Firefox, Safari 및 Chrome에서만 지원되며 브라우저의 개인 접두사 -moz- 및 -webkit-을 사용해야 합니다.

비스듬한

기울이기는 x 및 y축을 중심으로 특정 각도로 개체를 기울일 수 있는 유용한 변환 기능이기도 합니다. 이는 요소의 모양을 변경하지 않고 회전만 하는 회전의 회전과 다릅니다. 기울이기는 요소의 모양을 변경합니다. Skew에는 각각 x축과 y축의 기울기를 나타내는 두 개의 매개변수가 있습니다.

인용된 내용은 다음과 같습니다.

#nav{
/* 이렇게 하면 nav 요소가 왼쪽으로 10픽셀, 아래로 20픽셀 이동됩니다 */
-moz-변환: 기울이기(30deg, -10deg);
-webkit-transform: 왜곡(30deg, -10deg);
}

브라우저 지원

Skew 속성은 현재 Firefox, Safari 및 Chrome에서만 지원되며 브라우저의 개인 접두사 -moz- 및 -webkit-을 사용합니다.

행렬

네, 매트릭스는 매트릭스입니다. 매트릭스는 고급 수학에서 아주 기본적인 것이고 CSS 3에서는 정말 고급 기능입니다. CSS 3에서는 위의 다양한 효과를 매우 유연하게 구현할 수 있는 매트릭스 기능을 도입합니다. 여기에는 6개의 매개변수(a, b, c, d, e, f)가 있으며 이는 실제로 이전 매개변수가 새 값으로 변환되는 3*3 행렬입니다.

|아베 |

0 0 1 |

심도 있게 공부하고 싶다면 여기 http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined를 살펴보세요. 이것은 SVG용 문서이지만 행렬 변환의 원리는 보편적입니다. .

예를 살펴보겠습니다:

인용된 내용은 다음과 같습니다.

#nav{
/* nav 요소는 오른쪽 상단 모서리처럼 기울어집니다 */
-moz-변환: 행렬(1, -0.2, 0, 1, 0, 0);
-웹킷 변환: 행렬(1, -0.2, 0, 1, 0, 0);
}

브라우저 지원

좋은 소식은 IE가 대부분의 CSS3 변환 기능을 지원하지 않지만 기본적으로 이 필터를 사용하여 동일한 효과를 얻을 수 있다는 것입니다. 그러나 먼저 행렬 연산을 이해해야 합니다. 웹킷과 Firefox(3.5+) 모두 이 기능을 지원합니다.

체인 변형

변환은 독립형인 경우가 많지만 동시에 여러 변환을 사용하려는 경우 특히 비공개 확장을 사용하여 코드를 빠르게 통합할 수 있습니다. 다행히도 몇 가지 기본 제공되는 약어가 있습니다.

인용된 내용은 다음과 같습니다.

#nav{
-moz-transform: 번역(10, 25);
-webkit-transform: 번역(10, 25);
-moz-변환: 회전(90도);
-웹킷 변환: 회전(90도);
-moz-변환: scale(2, 1);
-webkit-transform: scale(2, 1);
}

이러한 변환을 서로 연결하여 코드를 더욱 효율적으로 만들 수 있습니다.

인용된 내용은 다음과 같습니다.

탐색{
-moz-transform: 이동(10, 25) 회전(90deg) 축척(2, 1);
-webkit-transform: 이동(10, 25) 회전(90도) 축척(2, 1);
}

이러한 속성의 진정한 힘은 서로 결합됩니다. JavaScript를 사용하지 않고도 인라인 및 블록 수준 요소를 이동, 회전, 크기 조정 및 제어할 수 있습니다. 이러한 속성에 대한 지원이 더욱 광범위해지면 더 풍부하고 가벼운 인터페이스와 애플리케이션을 만들 수 있습니다.

변환 원본

변환 원본은 변환의 하위 기능은 아니지만 변환과 매우 밀접하게 관련되어 있습니다. 변환의 시작점을 지정하는 데 사용할 수 있습니다. 예를 들어 회전 변환의 기본 시작점은 왼쪽 상단 또는 왼쪽 하단에 시작점을 설정할 수 있습니다. 회전 변환은 매우 다를 수 있습니다.

변환 원본은 백분율, em, px 등과 같은 특정 값 또는 왼쪽, 중앙, 오른쪽 또는 위쪽, 중간, 아래쪽 등과 같은 설명 매개변수일 수 있는 두 개의 매개변수를 허용합니다. 몇 가지 예:

인용된 내용은 다음과 같습니다.

.class1{-moz-변형-원산지: 0 0;
-웹킷-변형-원산지: 0 0;
...
}
.class2{-moz-transform-origin:100% 100%;
-웹킷 변환 원본:100% 100%;
...}
.class3{-moz-transform-origin:왼쪽 위;
-webkit-transform-origin:왼쪽 위;
...}

브라우저 호환성

이 속성은 현재 웹킷 및 파이어폭스에서만 지원되며 자체 비공개 접두사를 추가해야 합니다.