변형 속성

✒️ 2025-05-16 12:44 내용 수정

transform

요소의 모양, 크기, 위치 등을 바꿀 때 사용한다.
참고 자료 : TCPSchool CSS transform

css좌표.png

{transform : translate(10%, 10%) scaleX(10) rotate(90deg);}
{transform-origin : top left;}
{perspective : 100px;}

CSS 함수 참고 : https://www.quackit.com/css/functions/
- 함수를 작성할 때 반드시 값과 연산자는 띄어쓰기 해야 한다.

/* 만약 연산자와 값을 붙여서 쓰면 CSS가 적용되지 않는다. */
div{width:calc((100% - 48px) / 2)};

속성	함수/속성값	설명
`transform`
	`translate(X, Y)`	x, y 방향으로 이동(좌표계 기준)
	`translate3d(X, Y, Z)`	x, y, z 방향으로 이동
	`translateX(X)`	x 방향으로 이동
	`translateY(Y)`	y 방향으로 이동
	`scale(X, Y)`	가로와 세로 방향 축소 및 확대. 마름모 형태 생성 가능
	`scale3d(X, Y, Z)`	x, y, z 축 방향 축소 및 확대
	`scaleX(X)`	x 방향 축소 및 확대
	`scaleY(Y)`	y 방향 축소 및 확대
	`scaleZ(Z)`	z 방향 축소 및 확대
	`skew(Xdeg, Ydeg)`	가로와 세로 방향 기울기
	`skewX(Ndeg)`	가로 방향 기울기
	`skewY(Ndeg)`	세로 방향 기울기
	`rotate(Ndeg)`	회전
	`rotate3d(Xdeg, Ydeg, Zdeg)`	x, y, z 축 방향 회전
	`rotateX(Ndeg)`	x 축 기준 회전
	`rotateY(Ndeg)`	y 축 기준 회전
	`rotateZ(Ndeg)`	z 축 기준 회전
	`matrix(scaleX(), skewY(), skewX(), translateX(), translateY())`	2D transform 메소드를 한 줄에 설정. 매개변수 6개
	`matrix(nX16)`	3D transform 메소드를 한 줄에 설정. 매개변수 16개를 4X4 행렬로 적용
`transform-origin`	`left, right, bottom, top, center`	변형 기준점 설정. X축 Y축 순서대로 설정
`perspective`	`length(px)`	요소에 원금감 적용(3D)
`perspective-origin`		원근법을 적용할 기준점 설정

input 태그의 checkbox 크기

<input type="checkbox"/>의 체크박스 크기를 변경할 때 transform 속성을 사용한다.

input{
	transform: scale(2);
}

input_transform 1.png input_transform 2.png

transition

정해진 시간 동안 요소의 속성값을 부드럽게 변화 시킬 수 있다.
참고 자료 : TCPSchool transition

selector{
	transition: width 2x ease 1s;
}

selector{
	transition: 0.3s;
}

transition과 transform은 함께 사용할 수 있다.

/* 마우스을 올리면 크기가 커지는 효과 */
.box{
	transform: scale(1);
	transition: transform 0.2s ease-in-out;
}
.box:hover{
	transform: scale(1.3);
}

속성	속성값	설명
`transition`		요소에 적용할 CSS 스타일 전환 효과와 지속 시간 설정
	`property duration timingfunction delay`	syntax : 속성 지속시간 속도 지연시간
`transition-delay`	`Ns`	전환 효과가 나타나기 전까지 지연 시간 설정
`transition-duration`	`Ns`	요소에 추가된 효과가 지속될 시간을 설정
`transition-property`	`property`	요소에 추가할 전환 효과 설정
`transition-timing-function`		전환 효과의 시간 당 속도 설정
	`linear`	처음부터 끝까지 같은 속도
	`ease`	천천히 시작 후 빨라지다가 천천히 종료
	`ease-in`	천천히 시작
	`ease-out`	천천히 종료
	`cubic-bezier(n, n, n, n)`	사용자 정의 속도

animation

CSS 스타일을 다른 CSS 스타일로 부드럽게 전환 시켜준다.
참고 자료 : mdn web docs CSS animations
@keyframes로 애니메이션을 지정하고, 애니메이션을 넣을 요소에 animation 관련 속성으로 부여한다.

@keyframes 애니메이션이름 {
	/* 진행 단계 지정 */
	0% {
		속성1: 값;
	}
	100% {
		속성1: 다른값;
	}
}

.selector{
	animation: 애니메이션이름 2s ease-in-out 0.5s infinite alternate;
}

속성값	설명
`animation`	animation 속성들의 축약표현
`animation-name`	키프레임으로 생성한 애니메이션 이름
`animation-delay`	요소가 로드된 후 언제 애니메이션이 시작될지 지정
`animation-duration`	한 사이클의 애니메이션이 얼마나 지속될지 지정
`animation-iteration-count`	애니메이션 반복 횟수 설정 `infinite` 지정 시 무한 반복
`animation-play-state`	애니메이션을 멈추거나 다시 시작할 수 있음 `running`, `pause`
`animation-timing-function`	중간 상태들의 전환 시간 간격을 설정 `ease`, `ease-in-out`, `linear`, `cubic-bezier` 등
`animation-fill-mode`	애니메이션 시작 전이나 후 어떤 값을 적용할지 지정 `none` : 애니메이션이 실행되지 않을 때 대상에 스타일 지정x `forward` : 실행된 애니메이션의 마지막 키프레임에 의해 설정된 값 유지 `backward` : 첫 번째 관련 키프레임에 정의된 값을 `animation-delay` 동안 유지 `both` : 애니메이션 앞뒤 양쪽 모두의 규칙을 따름

/* 깜빡이는 버튼 효과 
마우스를 올려 놓으면 크기가 커짐
*/
@keyframes blink {
	0% {opacity: 1;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
.box{
	animation: blink 1s linear infinite;
}