[css3] rotate 함수 - 요소 회전시키기

1. 개념

rotate 함수 - 요소 회전시키기

rotate은 2차원이나 3차원에서 웹 요소를 시계 방향이나 반 시계방향으로 회전시킴

이 함수는 2차원,3차원에서 모두 rotate 함수로 사용이 가능하고 추가적으로 3차원에서는 rotate3d , rotateX , rotateY , rotateZ 함수도 사용가능

rotate 함수는 각도(deg)나 레디안 값을 사용
1레디안 = 180도 / π(파이)

2. 태그

rotate

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

< ! DOCTYPE html> < html lang = "kr" > < head > < meta charset = "utf-8" > < title > 키보드와 하루 < /title > < /head > < body > < div > < img src = "home.jpg" >< /div > 1 < div style =' transform : rotate(45deg) ' > < img src = "home.jpg" > < /div > 2 < div style =' perspective : 300px ' > < div style =' transform : rotateX(30deg) ' > < img src = "home.jpg" > < /div > < /div > 3 < div style =' perspective : 300px ' > < div style =' transform : rotate(1,-2,1.5,30deg) ' > < img src = "home.jpg" > < /div > < /div > < /body > < /html >

코드 설명

1

transform : rorate(30deg)

rotate - 사용 예제

위에서 보면 2차원에 해당하는 요소를 시계방향으로 회전시켜보았습니다.
3차원과 다르게 2차원에서는 rotate라는 함수만 사용이 가능한데 회전시키고자 한 만큼의 각도를 입력해 주면 값에 따라 회전이 됩니다.
예를 들어 양수의 값으로 입력하게 되면 시계방향으로 회전을 하게 되고 , 음수의 값을 입력하게 되면 반시계방향으로 이동하게 됩니다.
예제에서는 20deg 만큼의 일반 각도로 회전시켰기 때문에 위의 결과처럼 보이게 됩니다.

2

transform : rotateX(30deg)

rotateX - 사용 예제

rotateX는 3차원에서 사용되는 함수입니다.
여기서 먼저는 perspective라는 속성을 이용해서 일반 화면을 입체적인 느낌으로 설정해 주었습니다.
그렇게 해야만 3차원의 경우에는 값들이 적용되기 때문입니다.
그래서 위에서 보시는 것처럼 rotateX를 써서 X축을 기준으로 30도로 시계방향으로 요소를 회전시키고 있음을 알 수 있습니다.

3

transform : rorate3d(1,-2,1.5,30deg)

rotate3d - 사용 예제

rotate3d는 요소를 회전시키고자 할 때 x축 , y축 , z축에 대한 방향을 가리키는 양을 설정한 후에 지정한 각도만큼을 회전하게 합니다.
위에서 예제를 보시면 x축은 1정도의 물리량을 가진 방향으로 하고 y축은 -2만큼의 물리량을 가졌으며 z축은 1.5만큼의 방향 물리량을 정해주었습니다.
이렇게 각각의 x,y,z에 물리량을 정해진 후에 일반 각도 30도로 회전을 하라고 설정을 해주게 되면 위와 같은 결과가 나오게 됩니다.