목차
rotate 예제 - 각도만 지정해 요소 회전
rotate 정의
rotate 구문
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>
결과보기
주소 복사
랜덤 이동