18. CSS - 레이아웃 - 변형 관련 스타일

• transform : 변형과 관련된 속성
• CSS 속성 작성 시 크로스 브라우저(브라우저 달라지는 경우) 처리 방법
  • -ms- : 마이크로 소프트(익스플로러, 엣지)
  • -webkit : 크롬, 사파리
  • -o- : 오페라
  • -moz- : 파이어폭스

 

 

• 2차원 변형 - 이동

HTML 작성 화면
CSS 작성 화면
좌우 움직인 웹에서 출력된 화면
상하 움직인 웹에서 출력된 화면
대각선 움직인 웹에서 출력된 화면

 

• 2차원 변형 - 확대/축소

HTML 작성 화면
CSS 작성 화면
가로 방향 확대 웹에서 출력된 화면
세로 방향 확대 웹에서 출력된 화면
대각선 방향 확대 웹에서 출력된 화면
대각선 방향 확대 웹에서 출력된 화면

 

 

• 3차원 변형 - 회전

HTML 작성 화면
CSS 작성 화면
x, y, z 축 이동 웹에서 출력된 화면
x축 회전 웹에서 출력된 화면
y축 회전 웹에서 출력된 화면
z축 회전 웹에서 출력된 화면
x, y, z축 회전 웹에서 출력된 화면

 

 

• 변형 사이에 지연시간 추가하기(trasition)
  • transition-duration : 시간 입력; -> 변형 되는데 걸리는 시간 지정
  • transition-timing-function: linear; -> 항상 같은 속도
  • transition-delat: 시간입력; -> 변형되는 시간을 지연시킴