- CSS3 변형
- 2D Transform(2차원변형) :
- translate() : X,Y축 이동
- rotate(deg) : 각도 회전
- scale() : 배율확대축소
- skew(XdegorYdeg) : 각도 기울기
- martix : 모든2D transform 메소드를 한줄에 적음
- 3D Transform(3차원변형)
- rotateX,rotateY,rotateZ : 회전
- translate :
- scaleX,scaleY,scaleZ :
- perspective() : 3D요소에 원근감을 표현 할 때 사용하는 픽셀 수 설정
- matrix() : 16개의 매개변수를 한번에 적용
- Transition(전환) : transition : 속성명 시간 ;형태, 전환이 될 방법을 알려줘야 한다(hover 등)
- 전환 전 스타일과 전환 후 스타일을 지정하고 transition으로 어느것을 언제 전환할지 지정하면 된다. 여러개를 적용하고 싶다면 시간 뒤에 ,를 붙여서 쓴다. 만약 전체 전환값들이 동일시간이라면 각각 속성명 입력 대신 all 을 쓸 수 있다.
전환 후 원래대로 되돌아 올 때도 스타일을 지정해주고 싶다면 똑같은 것을 복사한 뒤 transition 줄 빼고 안에 스타일 값들을 다 지우면 된다 - 위의 transform도 넣을 수 있다
- transition-delay(지연시간) : 일정시간 뒤에 전환 효과가 나타남. 전
- transition-duration(지속시간) : 위에서 쓰던 속성명 시간 과 같음
- transition-property(스타일효과) : 효과를 적용할지 안할지
- transition-timing-function : ease(기본값)가속-등속-감속
ease-in : 천천히 시작(가속) / ease-out : 천천히 끝남(감속)
- 전환 전 스타일과 전환 후 스타일을 지정하고 transition으로 어느것을 언제 전환할지 지정하면 된다. 여러개를 적용하고 싶다면 시간 뒤에 ,를 붙여서 쓴다. 만약 전체 전환값들이 동일시간이라면 각각 속성명 입력 대신 all 을 쓸 수 있다.
- Animation : 현재 스타일을 다른 스타일로 천천히 변화 또는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시 @keyframes 규칙
- keyframes 규칙 관련
- from-to(시작과 끝) 또는 0%~100%(시작-중간-끝)을 설정 할 수 있다
- animation-name:규칙 으로 적용할 규칙을 지정한다.
- animation-duration:ns :애니메이션이 from(0%)에서 to(100%)까지 가는데 걸리는 시간
- animation-iteration-count : 애니메이션을 반복하는 횟수 – infinite(무한반복) 가능
- delay(지연시간),duration(시연시간),playstate(일시정지,다시재생),timing-function(중간상태들 전환 시간조절),fill-mode(전후 스타일 값)
- keyframes 규칙 관련
- 필터(filter)
- blur(모자이크)/brightness(밝기)/invert(반전)/sepia(선명도)/contrast(빛바랜색)
- 2D Transform(2차원변형) :