CSS를 움직이는 효과를 적용하는 방법에는
transform, transition, animation로 나뉜다.
이러한 속성들은 각각의 적용방법이 다르고,
용도가 다르기때문에 주의해서 익혀두어야 한다.!!
먼저, 3가지의 속성들에 대해 간단히 알아보자면
transform이란
요소에 회전, 크기 조절, 기울기 등의 효과를 부여하는 것이다.
active(클릭), hover(마우스) 등의 가상 선택자로 선택된다.
특징은 주위 요소들에 영향을 끼치지 않으면서
요소의 모습을 변화시킨다는 것이다.
transition이란?
transform 속성에 추가로 제어 기능을 넣어주는 것이다.
예를 들면 동작 시간, timing, 지연 시간 등의 값을 넣어주는 것이다.
마찬가지로 active(클릭), hover(마우스) 등의 가상 선택자로 선택된다.
animation이란?
가상 선택자등의 특정한 조건이 필요없이 event를 적용하게 해준다.
transition의 hover와 같이 마우스를 올려놨을 때만
event가 적용되는 것이 아니라 언제 어디서나 쓰일 수 있다는 점이다.
이러한 속성을 사용하면 자바스크립트 없이
요소에 애니메이션을 적용할 수 있다.
또한 transfomr과 같이 사용하여 좀 더 동적이 효과를 넣을 수 있다.
❗참고❗
animation은 @keyfames와 같이
사용해야 움직이는 효과가 나타난다.
다음 포스티에서 자세히 다뤄보도록 하겠다.😜😜
👻정리👻
transform, transition, animation의 차이
transform과 transition은 hover와 같은 특정한 동작에서
이뤄지는 효과들을 말하며,
transform은 주변 영향을 끼치지 않고 시간설정없이 효과가 적용되며,
transition은 시간설정과 같은 추가인 속성을 넣을 수 있어 좀 더 동적이다.
animation은 위와 같이 특정한 동작이 필요없이 효과를 적용된다.
오늘은 transform에 대해 다뤄볼 것이다.
처음 애니메이션을 접했을 때 너무 어려워서
transform이 뭔지 transition이 뭔지 헷갈렸는데
몇 번해보니 감을 잡은 거 같아서 포스팅하고 있는데..
혹시나 틀린 내용이 있다면 넘어가주세요..🙄😣
1.transform
요소에 회전, 크기 조절, 기울기 등의 효과를 부여하는 것으로
2차원, 3차원 transform으로 나뉘어서 쓰이기도 하지만
2d, 3d의 의미보다는 함수들이 어떤 용도로 쓰이는지가 중요하다.
대체로 rotate, scale, skew, translate 함수 등과 같이 쓰인다.
active(클릭), hover(마우스) 등의 가상 선택자로
효과를 적용할 요소를 선택해야 효과가 적용된다.
transform을 적용해야 하는 함수(속성)들을 알기전에
가장 먼저 요소의 어디를 기준으로 하는지 정해야한다.
0️⃣ transform-origin(x, y)
: transform와 함께 사용하는 속성으로
요소의 transform을 적용할 때 어디를 기준점으로 할 것인가?를 정의한다.
기본값은 center로 좌표상의 (0,0)을 의미한다.
left,top과 같이 방향을 정할 수 있으며,
x축과 y축에 대한 방향 크기 등으로 값을 정할 수 있다.
💻CSS코드
.box:hober{
transform-origin : center;
trnasfrom-origin : top letf;
transform-origin : 50px 50px;
transform-origin : 100% 100%;
transform-origin : bottom right 60px;
}
1️⃣scale(x,y)
: 크기를 조절하는 것으로
width = x배, height = y배만큼 크기를 조절하는 것이다.
scale(n)과 같이 한쪽 크기만 설정한다면
가로,세로 비율이 동일하게 n배 조절된다.
💻CSS코드
.box:hover{
transform: scale(2,3);
transform: scale(4);
}
2️⃣rotate(각도)
: 입력한만큼 회전 시키는 것을 의미한다.
초기값은 0으로 아무런 회전 변화가 없다.
( )안에는 10deg와 같이 각을 정해줄 수도 있고,
-0.25turn과 같이 1바퀴(1turn)을 기준으로
얼마큼 회전할 것인가를 정의한다.
(-0.25turn은 오른쪽으로 1/4회전)
그 외에 rad 값으로 정의할 수도 있지만
가장 많이 쓰는 단위는 deg로 회전각을 정의한다.
💻CSS코드
.box:hover{
transform : rotate(0);
transform : rotate(90deg);
transform : rotate(-0.25turn);
transform : rotate(3.14rad);
}
3️⃣skew(x,y)
: x축과 y축을 기준으로 입력한 각도만큼 비트는 것으로,
rotate와 같이 deg, turn, rad 값으로 각도를 정의한다.
💻CSS코드
.box.hover{
transform : skew(0);
transform : skew(15deg, 15deg);
transform : skew(0.06turn, 18deg);
transform : skew(.312rad);
}
4️⃣translate(x,y)
: x축(수평), y축(수직) 방향으로 요소가 이동하는 것으로,
좌표값만큼 이동하게 된다.
크기의 단위인 px, rem, ex, ch의 단위를 쓴다.
💻CSS코드
.box:hober{
transform : translate(0);
transform : translate(42px, 18px);
transform : translate(-2.1rem, -2ex);
transform : translate(3ch, 3mm);
}
위의 4가지의 함수들은 2d를 기준으로 쓰였으나
skew를 제외한 scale, rotate, translate 3가지 함수들은
기존 x축과 y축에 x축의 속성값을 추가해주면
3d에서도 가능하다.
👻예제👻
상자에 마우스를 올려놓았을 때,
크기와 회전율을 변경하기
💻HTML코드
<body>
<h1>CSS Transform</h1>
<div class="box-container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
<div class="box">D</div>
<div class="box">E</div>
</div>
</body>
💻CSS코드
.box-container{
display: flex;
}
/* 상자 스타일 변경 */
.box{
width: 100px;
height: 100px;
border: 2px solid black;
background: rgba(248, 66, 211, 0.937);;
}
/* transform 속성 적용하기 */
.box:hover{
transform: scale(1.5) rotate(-15deg);
transform-origin: 100% 100%;
}
💻결과
이상으로 transform 속성에 대해 다뤄보았다.
CSS에 대해 많이 배운거 같은데도 아직도 다뤄야 할 내용들이 너무 많다.
다음 시간에 이어서 transition과 animation에 다뤄보도록 하겠다!!
그럼 이만~~ 파이팅!!!!
📚지난 포스팅 리뷰하기
cursor와 hover의 차이
cursor는 마우스 커서 모양을 변경하는 것이고,
hover는 요소가 마우스로 위치시킬 때의 상태를 지정하는 것이다.
cursor속성에는 용도에 따라서 여러가지 스타일로 적용될 수 있다.
1️⃣ 기본적인 마우스 커서 스타일 : auto, default, none 등
2️⃣포인트 커서 스타일 : pointer, wait 등
3️⃣ 특정 영역에 대한 커서 : move, not-allowed 등
4️⃣ 사용자 정의 커서(custom cursor)
'Study with Yedol > CSS' 카테고리의 다른 글
| CSS 애니메이션(Animation) 속성과 키프레임(keyframes) (0) | 2024.02.04 |
|---|---|
| CSS transition 적용 방법 | transform과 차이 (0) | 2024.02.03 |
| CSS cursor 속성 적용 방법 (0) | 2024.01.19 |
| CSS Grid Layout 아이템 적용 속성 (0) | 2024.01.14 |
| CSS Grid layout 컨테이너 속성 (0) | 2024.01.12 |
