[css] CSS - rotate 속성 - 요소 회전 (= rotate속성 = 로테이트속성)

1. rotate 예제 - 각도만 지정해 요소 회전
2. rotate 정의
3. rotate 구문
4. rotate 예제 - 축/각도 둘 다 지정해 요소 회전

rotate 예제 - 각도만 지정해 요소 회전

 

<style>

div {

  height: 200px;

  width: 200px;

  display:inline-block;

  

}

#hz1 {rotate: 30deg; background:red;}

#hz2 {rotate: -30deg; background:pink;}

</style>

<div id="hz1">홈짱닷컴 Homzzang.com</div>

<div id="hz2">홈짱닷컴 Homzzang.com</div>

 

결과보기

rotate 정의

 

요소 회전.

 

---

 

1.

• 속성값이 1개인 경우, 각도만 지정된 경우이며 기본적으로 z축 기준으로 해당 각도만큼 회전.
• 속성값이 2개인 경우, 축과 각도 지정된 경우이며 해당 축 방향으로 해당 각도만큼 회전.
• 속성값이 4개인 경우, 벡터(x, y, z) 좌표와 각도 지정된 경우로 해당 벡터 좌표 기준으로 해당 각도만큼 회전.
• transform:rotate() 이용해서도 요소 회전 가능.

 

2.

• 기본값: none
• 상속여부: X
• 애니가능: O
• CSS버전: CSS3
• JS구문: object.style.rotate="-90deg";

 

3.

IE 제외한 주요 최신 브라우저 모두 지원.

 

4. MDN rotate 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/rotate

 

rotate 구문

 

selector {rotate: axis angle|initial|inherit;}

 

---

[속성값]

 

axis

회전축 지정. (※ 가능값: x, y, z) (기본값: z)

 

angle

회전각도 지정. (※ 가능단위: deg, rad, turn)

 

vector angle

3개 숫자는 회전할 요소의 벡터를 정의.  (가능값: number number number angle)

• 앞 3개 number : 각각 벡터의 x, y, z 좌표값.
• 마지막 angle : 회전각도임. 

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

 

rotate 예제 - 축/각도 둘 다 지정해 요소 회전

 

<style>

#box {

  width: 300px;

  height: 300px;

  padding: 10px;

  margin: auto;

  border: 1px solid black;

}

#box div {

  width: 250px;

  height: 250px;

}

#hz {

  position: absolute;

  background-color: lightgrey;

  opacity: 0.5;

}

#hz_rotate {

  background-color: hotpink;

  rotate: 1 1 0 60deg;

}

</style>

<div id="box">

  <div id="hz"></div>

  <div id="hz_rotate">hz</div>

</div>

 

결과보기