CSS3에서 변환 그라디언트 속성을 사용하는 방법

번역 요소는 현재 위치에서 요소를 이동하고 우리가 제공한 좌표에 따라 변위를 수행하는 것임을 알고 있습니다. 번역을 자세히 설명하고 모두가 이해할 수 있도록 작은 사례를 만들어 보겠습니다.

translate()는 주어진 왼쪽(x 좌표)과 위쪽(y 좌표)에 따라 현재 위치에서 요소를 이동합니다.

translate(x,y)는 2D 변환을 정의합니다. xy는 숫자입니다. x 양수는 오른쪽 음수입니다. 왼쪽 y 양수 3D 변환 정의

음수 아래쪽 및 위쪽에 대한 scale() 메서드

translate3d(x,y,z), 요소의 크기는 주어진 너비(X축) 및 높이에 따라 증가하거나 감소합니다. (Y축) 매개변수

scale(x,y)는 2D 변환 x y를 배수로 정의합니다.

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

rotate( ) 메소드는 주어진 각도에서 요소를 시계 방향으로 회전시킵니다. 음수 값이 허용됩니다. 요소는 시계 반대 방향으로 회전합니다.

rotate(30deg)는 30도 회전을 의미합니다.

matrix() 메서드

skew(x-angle,y-angle)는 2D 기울이기 변환을 정의합니다. X축과 Y축.

transition Transitionpropertytransition-property 속성은 전환 효과를 적용하는 CSS 속성의 이름을 지정합니다. 예: width

transition-property: none|all|property;

transition-duration 속성 전환 효과를 완료하는 데 필요한 사항을 지정합니다. 소요된 시간(초 또는 밀리초)입니다.

전환 타이밍 기능 속성은 전환 효과의 속도 곡선을 지정합니다.

transition-timing-function: 선형|ease|ease-in|ease-out|ease-in-out|cubic-

bezier(n,n,n,n) easy: 느린 시작을 지정한 다음 변경합니다.

transition-delay 속성은 전환 효과가 시작되는 시기를 지정합니다.

예:

div
{width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

관련 읽기:

CSS3 번역 속성에 대한 자세한 소개

CSS3 배경 크기 속성에 대한 자세한 소개

CSS3 함수인rotate()를 사용하는 방법

위 내용은 CSS3에서 변환 그라디언트 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!