css12

1변형: 특정 요소의 크기나 형태 등 스타일이 바뀌는 것
2차원 변형/3차원 변형
(수평,수직) (원근감 추가, z는 앞뒤 전후)
2translate 함수
지정한 방향으로 이동할 거리를 지정하면 해당 요소를 이동시킴
translate(tx,ty) / translateX(tx) / translateY(ty) / translateZ(tz)
3scale 함수
지정한 크기만큼 요소를 확대/축소
transform:scale(sx,sy) / transform:scaleX(sx) / translate:scaleY(sy) / translate:scaleZ(sz)
4rotate 함수
각도만큼 웹 요소를 시계 방향이나 시계 반대 방향으로 회전
일반 각도(degree)나 래디언(radian)값 사용(1래디언=1/180도)
transform:rotation(sx,sy) / transform:rotationX(sx) / translate:rotationY(sy) / translate:rotationZ(sz)
5skew 함수
요소를 지정한 각도만큼 비틀어 당긴다
transform:skew(sx,sy) / transform:skewX(sx) / translate:skewY(sy)

1transform-origin 속성
특정 지점을 변형의 기준으로 설정
(지정하지 않으면 가운데 부분이 오리진)
2perspective 속성
원금감을 갖게 함, 값이 클수록 사용자로부터 멀어짐
perspective-origin 속성
기준을 어디로 할 것인지 설정
3transform-style 속성
부모 요소에 적용한 3D변형을 하위 요소에도 적용
flat 하위 요소 따로
preserve 3d 부모 요소에 따라 같이 적용
4backface-visibilty 속성
요소의 뒷면, 즉 반대쪽 면을 표시할 것인지 결정
visible 뒷면을 표시(기본값)
hidden 뒷면 표시X
5두 개 이상의 변형 동시에 사용하려면 transform 속성에 변형 함수 나열
tranform: scale(2) perspective(120px)....