CSS3_변환

브라우저의 좌표(3차원)

2차원 변환

• transform 속성: 객체 변환
  예제1)

  <style>
      section {
          width: 100px; height: 100px;
          border: 5px solid black;
      }
  
      div {
          width: 100px; height: 100px;
          background: red;
  
          transform: rotate(60deg);
          /* 사각형 60도 회전 */
          transform: rotate(60deg) scale(1.2) skewY(10deg);
          /* 사각형 60도 회전 크기 1.2배 y축 방향으로 10도 기울어진 사각형*/
      }
  </style>

• transform-origin 속성: 변환 중심을 설정하는 스타일 속성(변환 중심점)
  예제2)

  <style>
      div {
          width: 100px; height: 100px;
          background: red;
          transform-origin: 100% 100%;
          /* 객체 변환 중심 지정 */
      }
  </style>

3차원 변환

• transform-style 속성
  키워드)
  flat: 후손의 3차원 속성을 무시합니다.
  preserved-3d: 후손의 3차원 속성을 유지합니다.
  예제3) preserved-3d 속성을 사용한 예제
  http://127.0.0.1:5500/study/HTML/chapter10/10-3.html