CSS3 변환

* transition (변형) -> 시간의 흐름을 가지고 일어나는 변경
* transform (변환) -> 시간의 흐름을 따고 가지지 않고 일어나느 형태의 변경

• 변환이란?

  3차원 구현 방법

  1) 자바스크립트를 사용한 WebGL
  2) CSS3를 사용한 3차원 변환

• 2차원 변환

  좌표

  * 화면의 왼쪽 상단 점이 영점
  X축 (가로), Y축 (세로), Z축

  transform 속성

  <section>
     <div></div>
  </section>

  <style>
      section {
          width: 100px; height: 100px;
          border: 5px solid black;
      }
      div {
          width: 100px; height: 100px;
          barkground: red;
      }
  </style>

  transform 사용

  div {
      width: 100px; height: 100px;
      background: red;
      transform: rotate(60deg);
  }

  2차원 변환 함수

  1) translate(translateX, translateY)
  2) translateX(translateX)
  3) translateY(translateY)
  4) scale(scaleX, scaleY)
  5) scaleX(scaleX)
  6) scaleY(scaleY)
  7) skew(angleX, angleY)
  8) skewX(angleX)
  9) skewY(angleY)
  10) rotate(angleZ)
  예시

  div {
      transform: rotate(60deg) scale(1.2) skewY(10deg);
  }

  변환 함수 입력 순서에 따라 결과가 다르니 유의하자!!

  transform-origitn

  --> 변환 중심을 설정하는 스타일 속성
  --> default 값은 태그 영역의 중심
  * 해당 함수에는 2가지의 크기 단위 사용 가능 --> %, 키워드
  transform-origin: 100% 100%; --> 오른쪽 아래
  transform-origin: right bottom; --> 오른쪽 아래

• 3차원 변환

  3차원 변환 함수

  1) translate3d(translateX, translateY, translateZ) -> 이동
  2) scale3d(scaleX, scaleY, scaleZ) -> 확대 및 축소
  3) rotate3d(angleX, angleY, angleZ) -> 회전

  transform-style

  --> 변환을 적용할 때 그 영향력이 자신에게만 적용될지 자손에게도 적용될지 정하는 속성

  키워드

  1) flat: 후손의 3차원 속성 무시, default 값
  2) preserve-3d: 후손의 3차원 속성을 유지

  backface-visibility

  --> 3차원 공간에서 평면의 후면을 보이거나 보이지 않게 만드는 스타일

  키워드

  1) visible: 후면을 보이게 만든다.
  2) hidden: 후면을 보이지 않게 만든다.

• 원근법

  --> perspective 속성은 클수록 픽셀을 밀집해서 보여준다.