【CSS】transform 속성～ 2D 회전

transform 속성을 사용하여 요소(要素)를 이동, 회전, 크기 조절, 기울게 할 수 있습니다. 공백으로 구분하여 한꺼번에 지정할 수 있습니다.

transform 속성은 2차원과 3차원의 두 개의 다른 설정이 있습니다. 이들은 각각 독자적인 개별 속성과 값이 붙어 있습니다.

transform 속성에 대한 브라우저의 지원이 아직 완벽하지는 않지만, 벤더 접두사(-webkit-, -moz-, -o- 등)로 어느 정도 커버할 수 있습니다.

Transform 구문

transform 속성을 포함해서, 속성 값은 괄호 안에 수치(数値) 등을 입력하여 스타일을 지정할 수 있습니다.

벤더 접두사(vendor prefixes)

div {
 　-webkit-transform: rotateY(45deg);
 　-moz-transform: rotateY(45deg);
 　-o-transform: rotateY(45deg);
 　transform: rotateY(45deg);
 　}

점점 브라우저 지원 환경이 개선되고 있기 때문에 시간이 지날수록 벤더 접두사가 필요 없게되는 시기가 올 것이지만, 당분간은 병행하는 것이 좋을지도 모릅니다.

2D / 3D Transform

요소는 2차원과 3차원 모두에서 transform이 작동합니다.

2차원의 transform은 각각 수평 및 수직 축인 X축과 Y 축에서 작동합니다. 3차원은 X축와 Y축, 그리고 깊이를 나타내는 Z축을 추가하여 정의합니다.

transform 속성
rotate(deg)	요소를 회전시킨다. rotate(), rotateX(), rotateY(), rotateZ(), rotate3d() 값의 지정은 ()에 회전 각도 값을 입력한다.
scale(수치))	요소의 크기를 조절한다. scale(), scaleX(), scaleY(), scaleZ(), scale3d() 값의 지정은 ()에 숫자를 입력한다.
skew(deg)	요소의 경사를 변형시킨다. skew(), skewX(), skewY() 값의 지정은 ()에 경사 각도의 값을 입력한다.
translate(거리)	요소의 위치를 이동시킨다. translate(), translateX(), translateY(), translateZ(), translate3d() 값의 지정은 ()에 거리 값을 입력한다.

스폰서 링크

2D Rotate(2차원 회전)

Rotate 값은 0도에서 360도까지 요소를 회전시킵니다. 양수(+)는 요소를 시계 방향으로 회전시키고, 음수(-)는 반 시계 방향으로 회전합니다. 회전의 초기 값은 요소의 중앙인 50% 50%(수평과 수직 모두)입니다.

rotate 각도의 단위는 deg로 회전 각도를 지정할 수 있습니다.

transform: rotate(Ndeg)：(반)시계 방향으로 회전

먼저 2개의 박스를 지정합니다. 하나는 원래의 박스(회색), 다른 하나는 회전에 사용할 박스(흰색 원)를 아래와 같이 각각 지정합니다.

CSS：박스 지정

　.backbox {
　　　　background-color:#666; 
　　　　border-radius: 3px;
　　　　margin: 25px 25px;
　　　　position:relative;
　　　　float: left;}
　.rotatebox {
　　　　border:1px solid #999;
　　　　background:#FFF;
　　　　width:100px;
　　　　height: 100px;}

다음으로, 박스를 회전시키는 임의의 박스를 준비하고 설정합니다.

박스에 마우스 오버했을 때 시계 방향으로 360도, 2초간 회전하도록 "hewjeon" 라는 애니메이션 이름으로 rotate값을 지정합니다.

반 시계 방향으로 회전하려면 "transform : rotate (-360deg);>"와 같이 음수 값을 지정합니다.

CSS：rotate 지정

　.rotating {
　　　　cursor: pointer;
　　　　transform-style: flat; }
　.rotating:hover {
　　　　animation: hewjeon 2s linear infinite; }

　@keyframes hewjeon {
　　　　0% { 
　　　　transform: rotate(0deg);   }
　　　　100% {
　　　　transform: rotate(360deg);  }
　　　　}

부모(親) 박스(backbox)에 회전하는 자식(子) 박스(rotatiebox)와 그것을 회전시키도록 회전 애니메이션이 설정된 임의의 회전 박스(rotating)을 배치한 것이 다음의 결과입니다.

HTML

<body>
 <div class="backbox">
  <div class="rotating">
    <figure class="rotatebox">시계 방향</figure>
  </div>
 </div>
</body>

▼　아래의 각각의 원에 마우스를 올려 놓아 보십시요.

시계 방향

반시계 방향

transform 속성:rotate()
rotate(회전 각도)	요소에 2D 회전을 지정합니다.
rotateX(회전 각도)	X축에 시계 방향 회전을 지정합니다.
rotateY(회전 각도)	Y축에 시계 방향 회전을 지정합니다.
rotateZ(회전 각도)	Z축에 시계 방향의 회전을 지정합니다.
rotate3d(수치, 수치, 수치, 회전 각도)	rotate3d() 함수에서는, 처음의 세 숫자에 각각 x, y, z의 거리를 지정하여 임의의 축 방향을 지정하고, 마지막으로 회전 각도에 시계 방향의 3D 회전을 지정합니다.

스폰서 링크