Search

λ³€ν˜• 속성

λ³€ν˜• 속성

μš”μ†Œμ˜ 크기, λͺ¨μ–‘, μœ„μΉ˜λ₯Ό λ³€ν˜•μ‹œν‚€λŠ” 속성

λ³€ν˜• μ†μ„±μ˜ μ’…λ₯˜

속성
μ„€λͺ…
μ˜ˆμ‹œ μ½”λ“œ
transform
μš”μ†Œμ— λ‹€μ–‘ν•œ λ³€ν˜• 효과λ₯Ό μ μš©ν•©λ‹ˆλ‹€.
transform: rotate(45deg);
transform-origin
λ³€ν˜•μ˜ 기쀀점을 μ„€μ •ν•©λ‹ˆλ‹€.
transform-origin: top left;

κΈ°λ³Έ μ˜ˆμ‹œ μ½”λ“œ

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>λ³€ν˜• 속성 μ˜ˆμ‹œ</title> <style> body { margin: 0; font-family: Arial, sans-serif; text-align: center; padding: 50px; } /* transform μ˜ˆμ‹œ */ .transform-example { width: 150px; height: 150px; background-color: lightcoral; margin: 20px auto; display: inline-block; } .rotate { transform: rotate(45deg); } .scale { transform: scale(1.5); } .translate { transform: translate(50px, 50px); } .skew { transform: skew(20deg, 10deg); } /* transform-origin μ˜ˆμ‹œ */ .transform-origin-example { width: 150px; height: 150px; background-color: lightblue; margin: 20px auto; display: inline-block; transform: rotate(45deg); transform-origin: top left; } </style> </head> <body> <!-- transform μ˜ˆμ‹œ --> <div class="transform-example rotate">νšŒμ „</div> <div class="transform-example scale">ν™•λŒ€</div> <div class="transform-example translate">이동</div> <div class="transform-example skew">κΈ°μšΈμž„</div> <!-- transform-origin μ˜ˆμ‹œ --> <div class="transform-origin-example">기쀀점 λ³€κ²½</div> </body> </html>
HTML
볡사
μŠ€νƒ€μΌ 속성
μŠ€νƒ€μΌ 속성