CSS3_변환

모던웹을 위한 HTML5+CSS3바이블 3판 교재

chapter10. 변환

변환

• TML5에서 3차원 구현하는 방법 (2가지)
  1.자바스크립트 WebGL
  2.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

• backface-visibility 속성: 3차원 공간에서 평면의 후면을 보이거나 보이지 않게 만드는 스타일 속성
  키워드)
  visible: 후면을 보이게 만듭니다.
  hidden: 후면을 보이지 않게 만듭니다.
  예제4) hidden 속성을 사용한 예제
  http://127.0.0.1:5500/study/HTML/chapter10/10-3.html
  ->예제3 코드와 비교해 보면 차이를 알 수 있음 코드와 비교해 보면 차이를 알 수 있음

• 회전목마
  회전하며 변환하는 형태의 위젯
  예제5 )
  http://127.0.0.1:5500/study/HTML/chapter10/%ED%9A%8C%EC%A0%84%EB%AA%A9%EB%A7%88.html

css예제 참고사이트
https://ldrerin.tistory.com/397
https://itun.tistory.com/493