Publishing/CSS3

CSS 3D Transforms

oodada 2020. 2. 26. 09:44
반응형

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' 카테고리의 다른 글

SASS(SCSS) 컴파일 하는 방법  (0) 2020.03.18
CSS Transitions  (0) 2020.02.28
CSS 2D Transforms  (0) 2020.02.26
CSS Layout - Overflow  (0) 2020.02.25
CSS Box Model  (0) 2020.02.25
티스토리 친구하기