[css3] skew 함수 - 요소 비틀어서 왜곡시키기

1. 개념

skew 함수 - 요소 비틀어서 왜곡시키기

skew 함수는 2차원에서만 사용이 가능하며 해당하는 요소를 정해준 각도만큼 비틀어서 왜곡함
방향은 양쪽이나 한쪽으로 비틀 수 있음

2. 태그

skew

html5 코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

< ! DOCTYPE html> < html lang = "kr" > < head > < meta charset = "utf-8" > < title > 키보드와 하루 < /title > < /head > < body > < div > < img src = "home.jpg" >< /div > 1 < div style =' transform : skewX(30deg) ' > < img src = "home.jpg" > < /div > 2 < div style =' transform : skewY(30deg) ' > < img src = "home.jpg" > < /div > 3 < div style =' transform : skew(15deg,20deg) ' > < img src = "home.jpg" > < /div > < /body > < /html >

코드 설명

1

transform : skewX(30deg)

skewX - 사용예제

skew는 2차원에서만 변형이 가능한 함수 입니다.
그래서 3차원에서는 이 변형 함수는 사용할 수가 없습니다.
skew는 해당하는 요소를 비틀어 왜곡을 할 때 사용합니다.
자신이 원하는 만큼의 각도로 비틀고 왜곡하고자 할 때 각도를 입력하게 되고 양의 값을 입력한 각도와 음의 값을 입력한 각도에 따라서 비틀어지고 왜곡됩니다.
첫번째 예제에서는 skewX를 사용하게 되는데 이는 X축을 중심으로 각도만큼 비틀고 왜곡합니다.
skewX(30deg)는 x축을 기준으로 30도를 왜곡한 모양입니다.
위 그림에서 보는 것처럼 해당하는 만큼 적용된 것을 확인하실 수 있습니다.

2

transform : skewY(30deg)

skewY - 사용예제

skewY는 Y축을 중심으로 비틀고 왜곡하게 됩니다.
첫번째 예제와 확연한 차이를 보입니다.
첫번째에서는 X축을 중심으로 해서 요소를 비틀고 왜곡한 모습이라면 이번 예제는 Y축을 중심으로 비틀고 왜곡하였음을 알 수 있습니다.
이때도 마찬가지로 양의 값을 가진 각도와 음의 값을 가진 각도에 따라서 보여주는 모양이 다르게 됩니다.
자신이 원하거나 맞게 모양으로 비틀어서 사용하시면 됩니다.

3

transform : skew(15deg,20deg)

skew - 사용예제

skew는 한쪽 방향이 아닌 양쪽 방향으로 요소를 왜곡시킵니다.
첫번째 값은 X축으로 왜곡할 각도이고 두 번째 값은 Y축으로 왜곡할 각도입니다.
그래서 한쪽으로만 왜곡하였던 skewX , skewY와 같은 값을 한번에 설정해서 사용할 수 있습니다.
그리고 skew에는 두개의 값이 입력이 되는데 만약 두번째 값을 입력하지 않고 첫번째 값만 입력하게 된다면 y축으로 왜곡하고자 하는 값은 0이 되어서 x축으로만 왜곡하게 됩니다.
위에서 보면 15deg,20deg로 값을 주었습니다.
그러면 x축으로는 15도만큼 왜곡을 주고 y축으로는 20도 만큼의 왜곡을 주어서 비틀어지게 됩니다.
이렇게 양쪽으로 하는 경우는 skew를 이용해 두 개의 값을 주시면 됩니다.