변환 속성을 사용하는 방법

변환 속성을 통해 요소의 회전, 크기 조정, 기울이기, 이동과 같은 네 가지 유형의 변환을 수행할 수 있습니다.

CSS3에서는 변환 기능을 사용하여 텍스트나 이미지의 회전, 크기 조정, 기울이기, 이동 등 네 가지 유형의 변형 처리를 수행할 수 있습니다. 다음 글에서는 Transform 속성의 사용법을 자세히 소개해드리겠습니다

[추천 강좌: css3 tutorial]

rotate

사용법:

transform: rotate(45deg);

A 매개변수 각도, 단위 deg는 각도, 양수는 시계 방향 회전, 음수는 시계 반대 방향 회전을 의미하며 위 코드의 기능은 시계 방향으로 45도 회전하는 것입니다. :

div{
	width:200px;
	height: 200px;
	background-color: pink;
	transform: rotate(55deg);
}

매개변수는 확대/축소 비율을 나타냅니다.

하나의 매개변수가 사용되는 경우: 배율이 동시에 수평 및 수직으로 조정됨을 나타냅니다.

두 개의 매개변수가 있는 경우: 첫 번째 매개변수는 확대/축소 비율을 지정합니다. 수평 방향이고 두 번째 매개변수는 수직 방향의 확대/축소 비율을 지정합니다.

transform: scale(0.5)  或者  transform: scale(0.5, 2);

Rendering:

tilt 스큐

Usage:

div{
	width:200px;
	height: 200px;
	background-color: pink;
	transform: scale(0.5,1.2)
}

매개변수는 기울기 각도를 나타내며 단위는 deg입니다.

한 매개변수: 수평 방향의 기울기 각도를 나타냅니다.

두 개의 매개변수 언제: 첫 번째 매개변수는 수평 방향의 기울기 각도를 나타내고, 두 번째 매개변수는 수직 방향의 기울기 각도를 나타냅니다.

transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

Rendering:

Move Translate

Usage:

div{
	width:200px;
	height: 200px;
	background-color: pink;
	transform: skew(30deg, 30deg)
}

매개변수는 이동 거리를 나타냅니다. 단위는 px입니다.

한 개의 매개변수는 수평 방향의 이동 거리를 나타냅니다. 둘 매개변수: 첫 번째 매개변수는 수평 방향의 이동 거리를 나타내고, 두 번째 매개변수는 수직 방향의 이동 거리를 나타냅니다.

transform: translate(45px)  或者 transform:  translate(45px, 150px);

Rendering:

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