지난 포스트에서는 배경과 요소를 감각적으로 혼합하는 블렌드 모드에 대해 배웠다.
이번에는 웹 요소의 형태를 자유자재로 변형시키는 transform 속성을 살펴보겠다.
요소를 회전시키거나 크기를 조절하는 이 속성을 transition과 조합해, 별도의 이미지 편집 없이 코드만으로 생동감 넘치는 애니메이션 효과를 구현하는 방법을 알아보자.
이전 포스트
CSS 블렌드 모드: background-blend-mode와 mix-blend-mode 활용법
생활코딩 CSS 수업 영상: transform
CSS의 transform은 요소를 비틀고, 회전시키고, 크기를 조절하거나 이동시키는 등 형태 자체를 변형할 때 사용하는 속성이다.
가장 큰 특징은 다른 요소의 배치(레이아웃)에 영향을 주지 않고 자신만 공중에 뜬 것처럼 변형된다는 점이다.
그래서 transition과 함께 애니메이션을 만들 때 가장 많이 쓰인다.
CSS 이미지 필터 효과: filter 속성과 transition으로 부드러운 애니메이션 만들기
transition은 이전에 작성한 이 포스트에서도 잠깐 소개했지만, 다음 포스트에서 더 자세히 다룰 예정이다.
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
background-color: deepskyblue;
color: white;
display: inline-block;
padding: 5px;
font-size: 3rem;
margin: 100px;
transform: rotate(30deg);
}
</style>
</head>
<body>
<h3>Hello Transform!</h3>
</body>
</html>위의 생활코딩 수업 영상의 코드와 90% 이상 동일한 코드인데, transform 속성만 값을 변경했다.
Hello Transform!
위의 코드로 이런 결과가 나왔다.
Css3 Transform
영상에서 소개한 다양한 transform 효과를 보여주는 페이지의 링크다.
여기서 transform 속성의 여러 가지 효과들을 확인해 보자.
transform 두 번째 수업 영상이다.
이 수업 영상에는 오류가 하나 있다.
영상의 6분 9초부터 보면, 이동시킨 중심축에서부터 transform의 효과는 나타나지만 중심축이 고정이 되어있지 않고 transform의 효과가 나타나는 과정에서 중심축이 이동하는 것 같은 모습을 볼 수 있다.
이 문제까지 해결해 보겠다.
<!DOCTYPE html>
<html>
<head>
<style>
.scale {
background-color: deepskyblue;
color: white;
display: inline-block;
padding: 5px;
font-size: 3rem;
margin: 100px;
transition: all 0.5s;
}
.scale:hover {
transform: scale(1.5);
transform-origin: 0 100%;
transition: transform 1s;
}
</style>
</head>
<body>
<div class="scale">Hello Transform!</div>
</body>
</html>위의 수업 영상처럼 마우스를 올렸을 때, transition: all 1s;로 설정하면 중심축이 왔다 갔다 하는 문제가 생긴다.
transition: transform 1s;이라고 해줘야 한다.
transform - CSS | MDN
Hover.css - A collection of CSS3 powered hover effects
CSShake
영상에서 소개한 페이지들의 링크다.
특히 2번째와 3번째 링크가 유용할 것 같다.
transform 속성 정리
위의 영상의 내용들을 정리해 보겠다.
1. transform의 4대 기능
01. translate(x, y) - 이동
요소를 현재 위치에서 지정한 만큼 옮긴다.
transform: translate(50px, 100px);: (오른쪽으로 50px, 아래로 100px 이동)- 꿀팁:
translate(-50%, -50%)를 활용하면 요소를 완벽한 정중앙에 배치할 때 유용하다.
02. rotate(deg) - 회전
요소를 시계 방향이나 반대 방향으로 회전시킨다.
transform: rotate(45deg);: (시계 방향으로 45도 회전)- 마이너스 값을 넣으면 반시계 방향으로 돈다.
03. scale(x, y) - 크기 조절
요소의 크기를 배수로 키우거나 줄인다.
transform: scale(1.5);: (가로세로 모두 1.5배 확대)scale(0.5)는 절반으로 축소한다.
04. skew(x, y) - 왜곡(비틀기)
요소를 평행사변형처럼 비틉니다.
transform: skew(20deg, 10deg);: (X축으로 20도, Y축으로 10도 비틀기)
2. 여러 개를 동시에 쓰고 싶을 때
띄어쓰기로 구분해서 한 줄에 다 적으면 된다.
적는 순서에 따라 결과가 달라질 수 있으니 주의하자.
.box:hover {
/* 오른쪽으로 100px 이동하면서 45도 회전하고 1.2배 커지기 */
transform: translate(100px, 0) rotate(45deg) scale(1.2);
transition: all 0.5s;
}3. transform-origin (변형의 중심점)
기본적으로 모든 변형은 요소의 중앙(center)을 기준으로 일어난다.
만약 회전할 때 모서리를 축으로 돌리고 싶다면 이 속성을 쓴다.
transform-origin: left top;: (왼쪽 상단을 기준으로 회전하거나 커짐)
이렇게 요소에 움직임이나 특별한 각도를 줄 때는 transform을 쓰자.
transform을 잘 활용하면 꽤 감각적인 웹페이지를 꾸밀 수 있을 것 같다.
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩