본문 바로가기
Publishing/CSS3

CSS 3D Transforms

by 오다다 코드 odada 2020. 2. 26.

3D Transforms

CSS는 3D 변환도 지원합니다.

아래 요소 위로 마우스를 이동하여 2D와 3D 변환의 차이점을 확인하십시오.

2D 회전
3D 회전

 

 

 

 

CSS 3D 변환 방법

CSS transform속성을 사용하면 다음 3D 변형 방법을 사용할 수 있습니다.

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX () 메서드

 rotateX()방법은 주어진 각도에서 X 축을 중심으로 요소를 회전시킵니다.

#myDiv {
  transform: rotateX(150deg);
}

 

rotateY () 메서드

 rotateY()방법은 주어진 각도에서 Y 축을 중심으로 요소를 회전시킵니다.

#myDiv {
  transform: rotateY(130deg);
}

 

rotateZ () 메서드

 rotateZ()방법은 주어진 각도에서 Z 축을 중심으로 요소를 회전시킵니다.

#myDiv {
  transform: rotateZ(90deg);
}

'Publishing > CSS3' 카테고리의 다른 글

유용한 css js 라이브러리  (0) 2020.03.31
CSS Transitions  (0) 2020.02.28
CSS 3D Transforms  (0) 2020.02.26
CSS 2D Transforms  (0) 2020.02.26
CSS Layout - Overflow  (0) 2020.02.25
CSS Box Model  (0) 2020.02.25

댓글0