프로그래밍 공부 일기

2020년 11월 9일
이미지를 회전시키고 싶을 때는 이미지 자체를 편집하고 있었지만, transform 프로퍼티를 사용하는 것으로 회전할 수 있는 것을 알았으므로 정리한다.

transform 속성이란?

변환 함수(변형 함수)라 불리는 특별한 값을 지정함으로써 대상 요소를 3차원으로 변형시킬 수 있다.
transform 속성의 값에 rotate 라고 하는 변환 함수를 사용해 각도를 지정하면 지정한 각도로 문자나 이미지 등 HTML의 요소를 통째로 회전할 수 있다. 또, 2D의 평면 공간뿐만 아니라 X축·Y축·Z축을 기준으로 한 3D 공간에서의 회전도 할 수 있다.

2D와 3D로 회전시키는 경우의 기술 방법

/* 2D(平面)で回転 */
transform: rotate( 角度 );  
/* 3DのX軸(水平)で回転 */
transform: rotateX( 角度 ); 
/* 3DのY軸(垂直)で回転 */
transform: rotateY( 角度 ); 
 /* 3DのZ軸(奥行)で回転 */
transform: rotateZ( 角度 );

CSS에서 각도를 나타내는 단위는 deg로, 90deg이면 90도를 나타낸다. (마이너스 값을 사용할 수도 있음)

변환 함수

함수 이름
설명


none
요소를 변형하지 않음

matrix3d()
행렬식으로 요소를 변형합니다. 16개의 임의의 숫자를 쉼표로 구분하여 지정

translate3d()
요소의 xyz 좌표를 이동합니다. 이동 거리를 단위 첨부의 수치로 콤마로 단락지어 지정한다.

translateZ()
요소의 z 좌표를 이동합니다. 이동 거리를 단위로 표시된 숫자로 지정합니다.

scale()3d
요소를 x축, y축, z축 방향으로 확대·축소한다. 값은 쉼표 (,)로 구분하여 지정합니다.

scaleZ()
요소를 z축 방향으로 확대·축소한다. 임의의 실수로 배율을 지정한다.

rotate3d()
요소를 회전합니다. 값은 쉼표로 구분하여 지정합니다.

rotateX()
요소를 x축을 중심으로 회전합니다. 회전 각도를 단위가 붙은 수치로 지정한다.

rotateY()
요소를 y축을 중심으로 회전합니다. 회전 각도를 단위가 붙은 수치로 지정한다.

rotateZ()
요소를 z 축을 중심으로 xy 평면 위로 회전합니다. 회전 각도를 단위가 붙은 수치로 지정한다.

perspective()
화면으로부터의 시점의 거리를 지정해, z축 방향으로 변형한 요소의 깊이를 나타낸다.

2D 회전하는 방법

2D(평면) 회전에 있어서, -30deg 를 지정하여 반시계 방향으로 30도 회전시켜 본다.

CSS

.sagrada { 
    transform: rotate( -30deg );  
}

HTML

<p class="sagrada">
   <img src="SagradaFamília.jpg" alt="サグラダファミリア">
   サグラダファミリア
</p>

실행 결과

X축에서 3D 회전하는 방법

X축(수평 방향의 축)을 기준으로 180도 회전시켜 본다.

CSS

.sagrada {
    transform: rotateX( 180deg );
}

HTML

<p class="sagrada">
   <img src="SagradaFamília.jpg" alt="サグラダファミリア">
   サグラダファミリア
</p>

실행 결과

Y축으로 3D 회전하는 방법

Y축(수직 방향의 축)을 기준으로 180도 회전시켜 본다. (좌우 반전시켜 본다)

CSS

.sagrada {
    transform: rotateY( 180deg );
}

HTML

<p class="sagrada">
   <img src="SagradaFamília.jpg" alt="サグラダファミリア">
   サグラダファミリア
</p>

실행 결과

Z축에서 3D 회전하는 방법

Z축(깊이의 축)을 기준으로 반시계 방향으로 30도 회전시켜 본다.

CSS

.sagrada {
    transform: rotateZ( -30deg );
}

HTML

<p class="sagrada">
   <img src="SagradaFamília.jpg" alt="サグラダファミリア">
   サグラダファミリア
</p>

실행 결과


지금부터 Z축을 기준으로 3D 회전시켰을 때는 2D로 회전시켰을 때와 같은 결과를 얻을 수 있다.

참고문헌

CSS transform : rotate로 이미지와 문자를 회전하는 방법
transform 속성의 의미와 사용법(3D 공간에서의 변형)