CSS에서 전환과 변환의 차이점-CSS 튜토리얼-php.cn

CSS에서 전환과 변환의 차이점

王林

풀어 주다： 2024-02-18 19:46:19

원래의

1478명이 탐색했습니다.

CSS에서 전환과 변환의 차이점

CSS의 전환과 변형은 모두 애니메이션 효과를 얻기 위해 사용되는 속성이지만 기능과 사용 방법이 다릅니다.

전환 속성은 CSS 속성 변경 중 요소의 전환 효과를 지정하는 데 사용됩니다. Transition 속성을 통해 요소의 속성이 갑작스럽게 변하는 것이 아니라 초기 상태에서 최종 상태까지 원활하게 변하도록 할 수 있습니다. Transition의 구문은 다음과 같습니다.

transition: property duration timing-function delay;

로그인 후 복사

그중 property는 전환할 CSS 속성을 나타내며, 단일 속성일 수도 있고 여러 속성일 수도 있으며 쉼표로 구분됩니다. 지속 시간은 전환 기간을 초 또는 밀리초 단위로 나타냅니다. 타이밍 함수는 전환 속도 곡선을 제어하는 데 사용되는 전환 효과의 타이밍 함수를 나타냅니다. 기본값은 용이함입니다. 지연은 전환이 시작되기 전의 지연 시간을 나타냅니다.

전환 사용 예는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s ease;
}

.box:hover {
  width: 200px;
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

로그인 후 복사

위 예에서 마우스를 .box 요소 위로 가져가면 너비가 100px에서 200px로 부드럽게 전환됩니다.

transform 속성은 회전, 크기 조정, 변환, 기울기 등과 같은 요소의 변형 작업을 수행하는 데 사용됩니다. 변환 속성을 사용하면 문서 레이아웃을 변경하지 않고도 요소의 모양을 변경할 수 있습니다. Transform의 구문은 다음과 같습니다.

transform: function(value);

로그인 후 복사

그 중 function은 실행할 변형 함수를 나타내며 회전, 크기 조정, 평행 이동, 기울이기 등이 가능합니다.

다음은 변환 사용의 예입니다.

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg);
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

로그인 후 복사

위 예에서 .box 요소는 45도 회전되었습니다.

요약하자면, 전환 속성은 CSS 속성의 부드러운 전환 효과를 제어하는 데 사용되고, 변환 속성은 요소를 변형하는 데 사용됩니다. 실제 응용에서는 전환 속성을 통해 변환 속성의 전환 효과를 제어하기 위해 두 가지를 함께 사용하는 경우가 많으며 이를 통해 보다 복잡한 애니메이션 효과를 얻을 수 있습니다.

위 내용은 CSS에서 전환과 변환의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!