[css3] scale 함수 - 해당요소 확대,축소

1. 개념

scale 함수 - 해당요소 확대,축소

scale은 지정한 크기 만큼 요소를 확대하거나 축소시킴
지정한 크기가 1보다 작으면 원래 이미지 보다 축소되고 1보다 크면 원래 이미지 보다 확대됨
scaleX , scaleY , scaleZ , scale , scale3d 와 같은 함수가 있음

2. 태그

scale

html5 코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

< ! DOCTYPE html> < html lang = "kr" > < head > < meta charset = "utf-8" > < title > 키보드와 하루 < /title > < style > div { display : inline-block ; } < /style > < /head > < body > < div > < img src = "home.jpg" >< /div > 1 < div style =' transform : scaleX(0.5) ' > < img src = "home.jpg" > < /div > 2 < div style =' transform : scaleX(1.5) ' > < img src = "home.jpg" > < /div > 3 < div style =' transform : scaleY(0.5) ' > < img src = "home.jpg" > < /div > 4 < div style =' transform : scale(0.5,1.5) ' > < img src = "home.jpg" > < /div > < /body > < /html >

코드 설명

1

transform : scaleX(0.5)

scaleX - 사용예제

scaleX는 해당하는 요소를 지정한 크기 만큼 x축으로 확대하거나 축소하게 됩니다.
현재 예제는 0.5 라고 해서 1보다 작은 숫자를 입력했고 원래 이미지 크기보다 0.5배로 이미지가 감소된 것을 확인하실 수 있습니다.

2

transform : scaleX(1.5)

scaleX - 사용예제

scaleX에서 1보다 큰 경우에는 x축으로 요소를 확대시킵니다.
지금 보면 1.5라고 지정을 해서 원래 이미지 크기 1을 기준으로 0.5배 X축으로 확대되어 이미지를 표시하는 것을 알 수 있습니다.

3

transform : scaleY(0.5)

scaleY - 사용예제

scaleX가 x축을 중심으로 확대하거나 축소를 했다고 하면 scaleY는 y축을 중심으로 확대하거나 축소합니다.
마찬가지로 1보다 큰 경우에는 확대하고 1보다 작은 경우에는 축소하게 됩니다.
위에 예제에서는 0.5라고 해서 1보다 작은 수를 입력했기 때문에 y축으로 이미지가 축소되는 것을 확인하실 수 있습니다.

4

transform : scale(0.5,1.5)

scale - 사용예제

scale은 x축과 y축의 값을 동시에 입력하여 양쪽으로 확대하거나 축소할 수 있습니다.
여기서 만약 2개의 값을 입력하지 않고 1개의 값을 입력했을 경우에는 x축의 확대 값과 y축의 확대 값을 같은 것으로 인식하여 해당 요소를 확대하거나 축소하게 됩니다.
예를 들어서 scale(2) 라고만 입력을 하게 되면 x축으로 2 , y축으로 2 만큼 확대하라고 지정하는 것과 같은 의미입니다.