[HTML/CSS] πŸ“š transform

pyeonneΒ·2022λ…„ 6μ›” 15일
0
post-thumbnail

πŸ“‹ κΈ°μ–΅ν•˜κ³  싢은 λ‚΄μš©

  • transform 속성을 μ‚¬μš©ν•œλ‹€κ³  ν•΄μ„œ λ ˆμ΄μ•„μ›ƒ μƒμ—μ„œ μš”μ†Œ μžμ²΄κ°€ λ³€ν˜•λ˜λŠ” 것은 μ•„λ‹ˆλ‹€.
  • μš”μ†Œμ— μ μš©ν•  ν•˜λ‚˜ μ΄μƒμ˜ CSS λ³€ν˜• ν•¨μˆ˜λ₯Ό μž‘μ„±ν•  수 μžˆλ‹€.

πŸ“Œ 크기 - scale

  • 2D λ§Œμ„ μœ„ν•œ transform-function이닀.
  • width, height μ†μ„±μœΌλ‘œ μš”μ†Œμ˜ 크기λ₯Ό μ‘°μ ˆν•˜λŠ” 것과 μ—Όμ—°νžˆ λ‹€λ₯΄λ‹€.
  • scale() ν•¨μˆ˜λ‘œ μš”μ†Œμ˜ 크기λ₯Ό μ‹œκ°μ μœΌλ‘œλ§Œ λ³€κ²½ν•  수 있고, λ³Έμ—°μ˜ μš”μ†Œκ°€ μ°¨μ§€ν•˜λŠ” 곡간은 κ·ΈλŒ€λ‘œ μ‘΄μž¬ν•œλ‹€.

πŸ“Œ νšŒμ „ - rotate

transform: rotate(45deg);

πŸ“Œ 이동 - translate

  • 첫 번째 μΈμžλŠ” xμΆ•, 두 번째 μΈμžλŠ” y좕을 μ˜λ―Έν•œλ‹€.
  • ν•œ 개의 κ°’λ§Œ μž‘μ„±ν•˜λ©΄ xμΆ•μœΌλ‘œλ§Œ μ΄λ™ν•œλ‹€.
  • percentage μžλ£Œν˜•μœΌλ‘œλ„ μž‘μ„±ν•  수 μžˆλ‹€.

πŸ“Œ 기울이기 - skew

  • ν•œ 개의 κ°’λ§Œ μž‘μ„±ν•˜λ©΄ xμΆ•μœΌλ‘œλ§Œ κΈ°μš΄λ‹€.
  • 90deg ν˜Ήμ€ (45deg, 45deg)둜 μ§€μ •ν•˜λ©΄ μ™„λ²½ν•˜κ²Œ 기울기 λ•Œλ¬Έμ— λˆˆμ— 보이지 μ•ŠλŠ”λ‹€.

πŸ“Œ 기쀀점 - transform-origin

  • 기본값은 centerλ‹€.
  • 기쀀점을 λ³€κ²½ν•˜λ©΄ μ΅œμ’… 결과물이 μ™„μ „νžˆ λ°”λ€Œμ–΄ 버릴 수 있기 λ•Œλ¬Έμ— λ˜λ„λ‘μ΄λ©΄ 기본값을 μœ μ§€ν•˜λŠ” 것이 μ’‹λ‹€.
  • μ• λ‹ˆλ©”μ΄μ…˜ 효과λ₯Ό λΆ€μ—¬ν•  λ•ŒλŠ” μœ μš©ν•˜κ²Œ μ‚¬μš©λœλ‹€.

πŸ”— μ°Έκ³  래퍼런슀

profile
κ±΄κ°•ν•œ λͺΈκ³Ό λ§ˆμŒμ—μ„œ κ±΄κ°•ν•œ μ½”λ“œκ°€ νƒœμ–΄λ‚œλ‹€ !

0개의 λŒ“κΈ€