2/22-1

Posted by:

|

On:

|

  • 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 : 천천히 끝남(감속)
    • 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(전후 스타일 값)
    • 필터(filter)
      • blur(모자이크)/brightness(밝기)/invert(반전)/sepia(선명도)/contrast(빛바랜색)