jquery는 회전 중심을 설정합니다

CSS3의 등장으로 점점 더 많은 웹 디자이너와 개발자가 다양한 CSS3 애니메이션 효과를 사용하여 동적 페이지 효과를 만들기 시작했습니다. 그 중 회전 애니메이션 효과는 매우 일반적인 효과입니다. jQuery를 사용하여 회전 효과를 만들 때 회전 중심을 어떻게 설정하는가가 매우 중요합니다.

일반적으로 CSS3를 사용하여 회전 애니메이션 효과를 만들고, 회전 중심을 설정하여 원하는 회전 효과를 얻을 수 있습니다. jQuery에서는 회전 애니메이션 효과를 얻는 방법이 다르기 때문에 회전 중심 설정에도 추가적인 고려가 필요합니다.

회전 애니메이션 효과를 얻기 위해 일반적으로 jQuery의 animate() 함수를 사용하여 회전 각도, 지속 시간 및 기타 속성을 제어합니다. 그러나 회전 중심을 지정하지 않으면 기본적으로 회전 중심은 요소의 왼쪽 위 모서리가 됩니다.

회전하려는 요소가 정사각형이고 기본 회전 중심이 왼쪽 위 모서리라고 상상해 보세요. 그런 다음 요소가 시계 반대 방향으로 회전하면 오른쪽 하단 모서리가 항상 요소의 원래 위치에 고정됩니다. 이로 인해 회전할 때 요소가 크게 깜박이고 점프하여 사용자에게 나쁜 시각적 경험을 제공합니다.

따라서 회전 효과를 제어하려면 회전 중심을 지정해야 합니다.

jQuery는 회전 애니메이션 효과를 구현합니다.

jQuery를 사용하여 회전 애니메이션 효과를 구현할 때 일반적으로 변환 속성을 사용합니다. 변환 속성은 회전() 함수를 설정하여 요소의 회전 각도를 제어할 수 있습니다.

그러나 회전() 함수만 설정하고 회전 중심을 지정하지 않으면 요소는 기본 왼쪽 위 모서리를 회전 중심으로 사용합니다.

회전 애니메이션 효과를 구현할 때 회전 중심을 지정하려면 CSS3의 변환 원본 속성을 사용해야 합니다.

transform-origin 속성은 세 가지 값으로 구성됩니다. 첫 번째 값은 X축 위치를 나타내고, 두 번째 값은 Y축 위치를 나타내며, 세 번째 값은 요소의 회전 각도를 제어하는 ​​데 사용되는 길이, 백분율, 키워드 등이 될 수 있습니다. Z 축을 따라.

일반적으로 회전 중심을 지정하기 위해 다음과 같이 변환 원점 속성을 설정합니다.

$(selector).css("transform-origin", x-axis y-axis);

위 코드에서 x -축과 y축은 각각 우리가 설정해야 하는 회전 중심 좌표를 나타냅니다. 특히 요소의 왼쪽 상단을 기준으로 회전 중심 좌표의 오프셋을 지정해야 합니다.

예를 들어 요소의 중심점을 회전 중심으로 사용하려면 회전 중심 좌표를 "50% 50%"로 설정해야 합니다.

샘플 코드:

html:

<div id="box"></div>

css:

#box{
    width: 100px;
    height: 100px;
    background-color: red;
}

javascript:

$("#box").animate({rotate:"180deg"},2000);
$("#box").css("transform-origin", "50% 50%");

위 코드에서는 jQuery의 animate() 함수를 사용하여 요소의 회전 각도를 제어하고 요소가 회전하기 전에 회전 중심을 지정합니다. 좌표는 "50% 50%" 입니다.

회전 중심을 지정하면 회전하는 동안 요소의 위치 변화를 쉽게 제어할 수 있고 눈에 띄는 깜박임이나 점프 현상을 피할 수 있습니다.

결론

동적인 효과를 만드는 것은 현대 웹 디자인의 필수적인 부분입니다. 애니메이션 효과의 회전 중심을 정확하게 제어하는 ​​능력은 다양한 애니메이션 효과를 제작하기 위한 기본 기술입니다.

jQuery를 사용하여 회전 애니메이션 효과를 얻을 때 회전 중심 설정에 주의하세요. 회전 중심을 적절하게 설정함으로써 다양하고 멋진 애니메이션 효과를 만들어 사용자 경험을 향상시키고 웹사이트를 더욱 매력적으로 만들 수 있습니다.

위 내용은 jquery는 회전 중심을 설정합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!