๐transform - ์์์ ํํ๋ฅผ ๋ณ๊ฒฝํจ
์์์ ํ์ , ํฌ๊ธฐ ์กฐ์ , ๊ธฐ์ธ์ด๊ธฐ, ์ด๋ ํจ๊ณผ๋ฅผ ๋ถ์ฌํ ์ ์๋ค. ์๋ฌด๊ฒ๋ ์ ์ฉ๋์ง ์์ ๊ธฐ๋ณธ๊ฐ์ none ์ด๋ค.
transform์ด๋ผ๊ณ ํ๋ ํจ๊ณผ๋ <a> ์์๊ฐ block , inline - block ์ผ๋๋ง ๋ณํ๋๋ค. ์์ ๊ฐ์ ์ฝ๋์ผ ๋๋ ์๋ํ์ง ์๋๋ค.
a์ display:block์ ์ถ๊ฐํด์ฃผ๋ tramform์์ฑ์ด ์ ์ฉ๋๋ค.
๐transform - ๋ณํํจ์๋ค
translate() - ์ด๋์ ๋ด๋นํ๋ transform ํจ์์ด๋ค.
- ์ผ์ชฝ ์๋จ (0, 0) ์ขํ๋ฅผ ๊ธฐ์ค์ผ๋ก ์์๋ฅผ ์ด๋์ํฌ ์ ์๋ค.
- ๋จ์ํ ๋ณด์ด๋ ์ํ๋ง ์ด๋์ํค๋ ๊ฒ์ด๋ค. Layout ์์์ ์ด๋์ํค๋๊ฒ ์๋๋ค.
- ํ๋์ ๋ณ์๋ง ์ ๋ ฅ๋ฐ์ ๊ฒฝ์ฐ x์ถ์ผ๋ก๋ง ์ด๋ํ๋ค. -> x, y ๊ฐ ๋ชจ๋ ์ ์ฉ๋๋ scale() ํจ์์๋ ๋ค๋ฅด๋ค!
scale, scaleX(), scaleY() - ํ๋, ์ถ์ : 2D๋ก ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๋ transform ํจ์์ด๋ค.
- ๋ ๋ณ์ (sx, sy) ์ค ํ๋๋ง ์ ๋ ฅํ๋ฉด ๊ฐ๋ก์ ์ธ๋ก๊ฐ ๊ฐ์ ๋น์จ๋ก ๋ณ๊ฒฝ๋๋ค.
- width, height ์์ฑ์ผ๋ก ํฌ๊ธฐ๋ฅผ ์กฐ์ ํ๋๊ฒ๊ณผ๋ ๋ค๋ฅธ ๊ฐ๋ ์ด๋ค. -> Layout์ ์ํฅ์ ์ฃผ์ง ์๊ณ , ์์น์ ๊ณต๊ฐ์ ์๋๋๋ก ์ ์งํ๋ค
- scaleX() ์ scaleY() ๋ ํ๋์ ๋ณ์๋ง ๊ฐ๋๋ค. -> ๊ฐ๊ฐ ๊ฐ๋ก์ ์ธ๋ก ํฌ๊ธฐ๋ง ์กฐ์ ํ๋ค.
rotate() - ํ์ : ํ์ ์ ๋ํ๋ด๋ transform ํจ์์ด๋ค.
- ์์๋ ์๊ณ๋ฐฉํฅ, ์์๋ ๋ฐ์๊ณ๋ฐฉํฅ์ผ๋ก ํ์ ์ํจ๋ค.
- rotate(a) ํ์์ผ๋ก ์ฌ์ฉํ๋ค. -> a ๋ <angle> ์๋ฃํ์ด๋ค.
- <angle> ๋จ์์๋ deg, grad, rad, turn ์ด ์๋ค.
--> rotate() ํจ์์๋ ์ซ์+๋จ์ ์ ๋ณ์๋ฅผ ์ฌ์ฉํ๋ค.
- <angle> ๋จ์์๋ deg, grad, rad, turn ์ด ์๋ค.
skew() - ๋นํ๊ธฐ : ๊ธฐ์ธ์(์๊ณก) ๋ณํ์ ๋ํ๋ด๋ transform ํจ์์ด๋ค.
- rotate ์ ๋ง์ฐฌ๊ฐ์ง๋ก <angle> ์๋ฃํ์ ๊ฐ์ผ๋ก ์ฌ์ฉํ๋ค.
- skew(ax) ํน์ skew(ax, ay) ํ์์ผ๋ก ์ฌ์ฉํ๋ค. -> ๋ณ์๊ฐ ํ๋์ผ ๊ฒฝ์ฐ x์ถ์ผ๋ก๋ง ๊ธฐ์ธ์ธ๋ค,
transform-origin - ๊ธฐ์ค์ ๋ณ๊ฒฝ ์์ฑ: ๋ณํ๋๋ ๊ธฐ์ค์ ์ ์ค์ ํ๋ ํ๋กํผํฐ(์์ฑ) ์ด๋ค.
- transform ๊ณผ๋ ๋ณ๋๋ก ์ฌ์ฉ๋๋ ์์ฑ์ด๋ค. = ํจ์๊ฐ ์๋๋ค!
- ๊ธฐ๋ณธ๊ฐ์ center ์ด๋ค. -> width ์ ์ ๋ฐ, height ์ ์ ๋ฐ์ด๋ค.
- top, left, right, bottom ์ ํค์๋๋ก ์ง์ ํ ์๋ ์๊ณ , ๋ณ๋์ ์ง์ ๊ฐ์ ์ฌ์ฉํ์ฌ ์ขํ๋ฅผ ์ค์ ํ ์๋ ์๋ค.
๐transition - ์์๊ฐ ์ ํ๋๋ ๊ณผ์ ์ ๋ถ๋๋ฝ๊ฒ ํด์ฃผ๋ ๊ฒ
์์ ๋ณด์ฌ์ค transformํจ์๋ค์ ๋ณํ์ ๋์ง๋ง ์ ํ๋๋ ๊ณผ์ ์ด ์์ฐ์ค๋ฝ์ง ๋ชปํ๋ค. ์ด ์ ํ๋๋ ๊ณผ์ ์ ๋ถ๋๋ฝ๊ฒ ํด์ฃผ๋ ๊ฒ์ด transition ํจ๊ณผ์ด๋ค. transition ํจ๊ณผ๋ ์ฒ์์๋ ์ ์ฉ์ด ์๋๊ณ ๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฌ๊ฑฐ๋ ๋ค๋ฅธ ์ด๋ฒคํธ์ ๋ณํ์ ์ค๋๋ง ๋ฐ์๋๋ค.
transition-property : ์ํ๋ ๋์ ํจ๊ณผ๋ฅผ ์ ์ฉ์ํฌ ์์ฑ์ ์ ๋ ฅํฉ๋๋ค. (all, none, color, background-color)
transition-duration : ๋์ ํจ๊ณผ๊ฐ ๋ช ์ด ๋์ ์คํ๋ ์ง, ์์ํด์ ๋๋ ๋๊น์ง ์๊ฐ์ ๋ฐ๋ฆฌ์ด(ms), ์ด(s)๋จ์๋ก ์ค์ ํฉ๋๋ค.
transition-delay : transition ์์ฒญ์ ๋ฐ์ ํ ์ค์ ์คํํ ๋๊น์ง ์ง์ฐ ์๊ฐ์ ์ค์ ํฉ๋๋ค.
transition-timing-function : ์ ๋๋ฉ์ด์ ์ด ์ ์ฉ๋๋ ์๋๋ฅผ ์ง์ ํฉ๋๋ค.(linear, ease(๊ธฐ๋ณธ๊ฐ), ease-in, ease-out. ease-in-out)
์ฌ์ง์ผ๋ก๋ ์๋ํ๋์ง๋ง 1์ด๋์ ์์ฐ์ค๋ฝ๊ฒ ํจ๊ณผ๊ฐ ๋ํ๋๋ค. ์ฌ๊ธฐ์ a ์ ํ์ ๋ง๊ณ a:hover ์ ํ์์
transition-property:all;
transition-duration:1s;
์ด ๋ ์์ฑ์ ๋ฃ์ด์ฃผ๋ฉด ์ด๋จ์ง ๊ถ๊ธํด์ ํด๋ดค๋๋ ๋ง์ฐ์ค์ hover ํ ๋๋ง ๋์ ์ธ ํจ๊ณผ๊ฐ ๋ํ๋๋ค.
๋ง์ฐ์ค๋ฅผ ๋์ฐ๋ฉด ๋ค์ ๋ถ์์ฐ์ค๋ฌ์์ก๋ค.
์ฌ๊ธฐ์ transition-property ๋ฅผ ๋ ์์ธํ ์์๋ณด์๋ฉด
๋ง์ฝ์ transition-property: transform์ด๋ผ๊ณ ๋ฐ๋ก ์ง์ ๋๋ฉด
์ด๋ ๊ฒ ์ค์ ํ์ ๋ transitionํจ๊ณผ๋ transform์์ฑ๋ง ๋ํ๋๊ณ font-size๊ฐ ์ค์ด๋๋ ํจ๊ณผ๋ ๋ถ์์ฐ์ค๋ฝ๊ฒ ๋ํ๋๋ค.
transition-property : ์ด ํจ๊ณผ์ ๋ํด์ ์ฅ๋ฉด์ ํ์ ํด !!
๋ง์ฝ์ ๋ณต์์ ๊ฐ์ ์ํ๋ค๋ฉด transition-property: font-size transform; ์ด๋ผ๊ณ ์์ฑํ๋ฉด ๋๋ค.
์ผ์ผ์ด ๋ค ์ฐ๋๊ฒ ๋ฒ๊ฑฐ๋ก์ฐ๋
transition : all 0.5;
์ฐ๋ฆฌ๊ฐ ํํ ์ฐ๋ ํํ์ด๋ค!
์ฐธ๊ณ ์๋ฃ
'Frontend > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
css - ๋ ์ด์์ grid (0) | 2023.04.22 |
---|---|
html - img VS css - background (0) | 2023.04.21 |
css - flexbox (container , item) (0) | 2023.04.06 |
css - position,display (0) | 2023.04.05 |
css - ๋จ์ ์ดํดํ๊ธฐ(px,em,rem,vw,vh) (0) | 2023.03.21 |