CSS_변형 관련 스타일

이미지는 원래 자기만의 너비/높이를 가지고 있어
한방향의 크기만 지정해도
남은 방향은 자동적으로 비율에 맞춰서 지정된다.
-> height : auto / width : auto

크로스 브라우징 : 모든 웹을 동일하게 맞춰주는 기술

transform : 변형과 관련된 속성

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

스타일이 변경되는 시간 지정
transition-duration: 1s;

---

2차원 변형

transform: translateX(100px); (좌우로 움직이기)
-ms-transform: translateY(100px); (상하로 움직이기)
-webkit-transform: translate(100px, -100px); (대각선 움직이기)

scale(배율)
transform: scaleX(2); (가로 방향 확대/축소)
transform: scaleY(2); (세로 방향 확대/축소)
transform: scale(2, 2); (요소 확대/축소(대각선))


요소 회전
rotate(각도deg) 
transform: rotate(180deg);

---------------------------------------------------------


3차원 변형
x,y,z 축 이동
pserspective(z축 길이) : 원근법 적용 
transform: perspective(300px) translate3d(50px, 50px, 50px); (x, y, z축 이동)
transform: perspective(300px) rotateX(45deg); (x축 회전)
transform: perspective(300px) rotateY(45deg); (y축 회전)
transform: perspective(300px) rotateZ(45deg); (z축 회전)
transform: perspective(300px) rotate3d(0.5, 0.5, 0.5, 45deg); (x, y, z축 회전)

---

변형 사이에 지연시간 추가하기(transition)
transition-duration: 1s;

스타일 변형 진행 속도 조정
transition-timing-function: ease-in-out;

스타일 변형 딜레이(일정 시간 후 변경)
transition-delay: 1s;