image-orientation상속 가능애니메이션 허용

사용 가능한 값 타입

• CSS Images Module Level 3

  from-image | none | [ <angle> || flip ]

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

• <angle>

  0~360도 범위의 각도 값을 deg(도), grad(그레이드), rad(라디안), turn(턴) 단위로 표현한다.

  <angle> 데이터 타입은 <number> 타입의 값 다음에 사용 가능한 단위를 붙여 구성한다. 숫자와 단위 사이에 공백은 허용하지 않는다. 0인 경우에는 단위를 붙이지 않아도 된다.

  선택적으로 +, - 부호를 사용하여 양수와 음수 값을 구분하여 설정할 수 있다. 양수의 경우는 시계 방향, 음수의 경우에는 시계 반대 방향의 회전을 의미한다.

  Details

  사용되는 단위

  아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

  • deg

    보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

  • grad

    400grad(그라디안)은 완전한 원을 만든다.

  • rad

    2π(라디안)이 완전한 원을 만든다.

  • turn

    1turn(턴)이 완전한 원을 만든다.

  관련 함수

  모든 함수를 표시하지 않을 수도 있다.

  • rotateX()

    x 회전축으로 3차원 방식으로 회전처리 한다.

    • CSS Transforms Module Level 2

      transform: rotateX(-60deg);

      rotateX() 함수 테스트

  • rotateY()

    y 회전축으로 3차원 방식으로 회전처리 한다.

    • CSS Transforms Module Level 2

      transform: rotateY(-60deg);

      rotateY() 함수 테스트

사용되는 키워드

• flip

  회전 후 이미지가 수평으로 반전된다.

• from-image

  이미지의 방향이 EXIF와 같이 메타 데이터에 지정된 경우 이 값은 이미지의 방향을 올바르게 지정하는데 필요한 메타 데이터가 지정하는 각도로 계산된다. 필요한 경우 이 각도는 반올림되고 정규화된다.

• none

  추가 회전이 적용되지 않는다. 이미지가 인코딩된 방향으로 지정된다.