CSS 3D 플립

CSS에서 transform 속성은 요소의 좌표 공간을 변경하는 데 사용되며, 회전, 기울이기 및 번역과 같은 변형 속성 효과가 요소에 추가됩니다. 변환은 웹 페이지와의 사용자 상호 작용을 개선하는 요소를 디자인하는 데 도움이 됩니다.

 .element{
      background-color:transparent;
      width:300px;
      float: left;
  transform: rotateY(180deg);
}

변환 구문

 transform: rotateY(angle);

CSS 3D 뒤집기를 사용할 때 변형은 하나의 함수를 사용합니다.rotateY() 또는 rotateX() 이러한 각 함수에는 요소가 회전해야 하는 각도를 결정하는 매개변수 각도(예: 180deg)가 하나 있습니다. 매개변수는 회전 각도를 지정하며 매개변수는 양수 또는 음수일 수 있습니다.
양수는 시계 방향으로 회전하고 음수는 시계 반대 방향으로 회전합니다.
회전Y();
rotateY() 함수는 CSS 변형 속성과 함께 사용할 때 y축을 중심으로 요소를 회전합니다. 함수 값은 아래와 같이 요소를 시계 방향으로 회전시키려면 양수이거나 y축 방향에서 시계 반대 방향으로 요소를 회전시키려면 음수일 수 있습니다.

.요소{
배경색: 투명
너비: 300픽셀;
높이: 400px;
변환: 회전Y(-100deg);
}

이렇게 하면 요소가 y축 방향에서 시계 반대 방향으로 100도 회전합니다.

회전X()
rotateX() 함수는 CSS 3D 변환과 함께 사용됩니다. x축을 중심으로 요소를 회전하기 위해 transform 속성과 함께 사용됩니다. 필요할 때 y축을 중심으로 요소를 회전하기 위해 rotateY()와 함께 사용할 수 있습니다.

.요소{
배경색: 투명
너비: 300픽셀;
높이: 400px;
변환: 회전X(180deg);
}

위의 코드는 요소를 x축 방향에서 시계 방향으로 180도 회전합니다.
변환: 회전Y(180deg);

회전Y();



회전X();