[CSS] Transform&Transition 1탄

CSS 강의 Ep11_1 - Transform&Transition 1탄 | Transform | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요? (youtube.com)

---

---

Tansform

transform 사용 방법

X 축으로 div 태그 20px 이동.

 

특수한 함수를 통해서 다양한 효과 나타낼 수 있음.

---

다양한 효과 

skew 함수 = 지정한 각도만큼 왜곡.

---

실습 예시

기본 세팅.

- 박스 지정

스타일링.

---

translate 실습

X 축으로 20px 이동한 거 확인 가능.

좌측으로 이동하고 싶은 경우 음수 - 를 붙여서 적용시켜주면 됨.

이렇게 넣어주면 

한 꺼번에 X 좌표, Y 좌표 이동을 할 수 있다.

---

scale 실습

scale 안에는 숫자를 넣어주면 됨.

2를 넣어줬을 경우,

가로가 2 배가 된다.

한 50% 줄이고 싶은 경우, 0.5 

 

X 축 뿐만 아니라 Y 축도 적용할 수 있음.

그냥 scale 만 써서 X 축과 Y 축 둘다 적용시킬 수도 있다.

---

rotate 실습

 

회전 시킬 때 사용함.

소괄호 안에다가 각도를 적어주면 됨

ex) rotateX(45deg) = 45도

입체감을 표현하기 위해서 원근감을 표현하는 속성을 추가할 수도 있음.

box3 에다가 입체감을 보여줄거기 때문에

그 부모 요소에다가 perspective를 추가해주면 됨. 

= outline 에다가 추가. 

그러면 저렇게 입체감이 있는 걸 확인할 수 있음. 

저 perspective 값이 작으면 작을 수록 원근감이 가깝게 느껴진다.

 

10px 으로 지정해줬을 경우, 이런 식으로 더 가깝게 느껴짐.

그냥 rotate 만 써줬을 경우 

바로 그냥 회전이 되는 걸 확인할 수 있음.

rotateZ 를 사용해줬을 경우

현재 rotate 와 똑같은 걸 확인할 수 있음. 

 rotate 하고 rotateZ 는 똑같은 결과가 나오는 걸 확인할 수 이씀.

---

skew 실습

 

왜곡하는 함수.

소괄호 안에다가 각도값을 넣어주면 됨. 

X축에다가 15도를 넣어준 경우.

X축으로 뒤틀린 걸 확인할 수 있음