CSS3 튜토리얼-2D 변환

프론트엔드 개발 친구 여러분, CSS3 튜토리얼에서 CSS3가 div의 2D 및 3D 회전을 어떻게 구현하는지 아시나요? 이 과정은 매우 흥미롭습니다. 와서 배우는 것이 좋을 것입니다.

CSS3 변환:

CSS3 변환을 사용하면 요소를 이동, 크기 조정, 회전, 늘리거나 늘릴 수 있습니다.

그럼 어떻게 작동하나요?

변형은 요소의 모양, 크기, 위치를 변경하는 효과입니다.

2D 또는 3D 변환을 사용하여 요소를 변환할 수 있습니다.

브라우저 지원:

Internet Explorer 10, Firefox 및 Opera는 변환 속성을 지원합니다.

Chrome 및 Safari에는 접두사 -webkit-이 필요합니다.

참고: Internet Explorer 9에는 접두사 -ms-가 필요합니다.

2D 변환:

이 장에서는 다음과 같은 2D 변환 방법을 배웁니다.

translate()

rotate(); >

scale();

skew()

행렬();

인스턴스:

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

translate() 메서드:

translate() 메서드, 왼쪽(X축 기준) ) 및 top 매개변수에 의해 지정된 (Y축) 위치는 현재 요소 위치에서 이동됩니다.

예:

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

번역 값(50px, 100px)이 왼쪽 요소에서 50픽셀, 위쪽에서 100픽셀 이동됩니다.

rotate() 메서드:

rotate() 메서드는 요소를 지정된 각도만큼 시계 방향으로 회전합니다. 요소가 시계 반대 방향으로 회전하는 음수 값이 허용됩니다.

예:

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

값 회전(30도) 요소가 시계 방향으로 30도 회전합니다.

scale() 메소드:

scale() 메소드, 너비(X축) 및 높이에 따라 요소의 크기가 증가하거나 감소합니다. (Y축) 매개변수:

예:

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}

scale(2,4)는 너비를 원래 크기의 2배로, 높이를 원래 크기의 4배로 변환합니다.

skew() 메서드:

skew() 메서드, 이 요소는 가로(X축) 및 세로(Y축)에 따라 지정됩니다. axis) 선 매개변수 각도:

예:

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

skew(30deg,20deg)는 X축과 Y축을 중심으로 20도와 30도를 이루는 요소입니다.

matrix() 메서드:

matrix() 메서드와 2D 변환 메서드가 하나로 병합됩니다.

매트릭스 방식에는 회전, 크기 조정, 이동(이동), 기울기 기능 등 6가지 매개변수가 있습니다.

예:

matrix() 메서드를 사용하여 div 요소를 30° 회전합니다.

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

새 변환 속성:

모든 변환은 속성 아래에 나열됩니다. :

2D 변환 방법 :

위 CSS3 튜토리얼-2D 변환 내용, 관련 내용 더 보기 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!