transform

transform은 요소 박스를 변형하는 속성이다.
2차원, 3차원 변형이 가능하고, 변형 형태별로 함수 타입의 속성값을 지정한다.

CSS3 2D Transforms

2d transform 속성은 6가지가 있다.

  • translate()
    translate() HTML 요소 박스를 평면상에서 수평 이동하는 기능이다.
    가로 및 세로 방향을 이동하는 길이 값을 지정할 수 있다.

    .box1 {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari */
    transform: translate(50px,100px); /* Standard syntax */
}

  • scale()
    scale() 함수는 HTML 요소박스의 크기를 변형하는 기능이다. translate()함수와 마찬가지로 X,Y값을 지정하여 가로 및 세로 크기를 조절할 수 있다.
    scaleX()와 scaleY()로 각 축의 방향별로 요소 크기를 지정할 수 있다. scale() 함수 역시 변경된 요소의 크기가 다른 요소 배치에 영향을 끼치지 않는다.

    scaleX()와 scaleY()로 각 축의 방향별 요소 크기를 지정할 수 있다. scale()함수 역시변경된 요소의 크기가 다른 요소 배치에 영향을 끼치지 않는다.

  • rotate()
    rotate() 함수는 HTML 요소 박스를 평면상에서 회전하는 기능으로, 함수의 값으로 회전 각도(deg)를 지정할 수 있다.
    각도가 양수 값일 경우에는 시계방향으로 회전하고, 음수 값일 경우엔ㄴ 반 시계방향으로 회전한다.
    rotate 역시 박스가 회전되어 요소의 표시 영역이 변경되어도 다른 요소의 배치에는 영향을 끼치지 않는다.
  • skewX()
    다음은 X축으로 기울여졌다.
  • skewY()
    다음은 Y축으로 기울여졌다.
  • matrix()
    matrix()는 2D transform 사용할 수 있다. HTML요소 박스에 이동 및 회전 크기 변화와 기울임등을 복합적으로 적용할 수 있는 기능이다.
    함수 값은 3×3값의 행렬로, 앞서 살펴본 변형 관련 함수 값을 하나 혹은 둘 이상 조합하여 사용할 수 있는 기능이다.
    maxtrix(num, num, num, num, num, num);
    순서는 scaleX, skewX, skewY, scaleY, translateX, translateY 이다.

transform-origin은 transform의 변형 기준점을 지정하는 속성이다.
속성값은 x,y,z축 방향으로 3개까지 입력할 수 있으며 , 값이 1개 또는 2개일 경우에는 z축 값이 0이 된다.

perspective는 3D 공간에서 요소와 관측 점과의 거리, 즉원근감을 자정하는 속성이다.
속성값이 작을수록 가깝게 보이고, 클수록 멀게 느껴진다.

perspective-origin은 3D 공간상에서 원근감의 방향을 지정하는 속성으로, 요소의 좌측 상단을 기준으로 지정된 위치 값부터 원근감의 관측점이 적용된다.

transition

animation

CSS3 animation은 Javascript나 Flash를 사용하지 않고 HTML 대부분 요소에 애니메이션을 사용 할 수 있다.
– CSS3 애니메이션 만들어주는 사이트 : css3 Maker
@keyframes은 애니메이션을 구현할 때 기준이 되는 특정 시점으로, 각 키프레임 사이의 애니메이션은 자동으로 구현된다.

/* @keyframes 규칙 */
@keyframes sample {
  from { background-color:red; }
  to {background-color:yellow;}
}

div {
  width:100px;
  height:100px;
  background-color:red;
  animation-name:sample;
  animation-duration:4s;
}

from {} 시작지점을 의미하며, 0%로 선언할 수 있다.
to {} 종료지점을 의미하며, 100%로 선언할 수 있다.
또 퍼센트로 지정해서

animation-name:애니메이션이름
animation-duration::진행시간(2s,3s)
animation-iteration-count:반복횟수(infinite:무한반복)
animation-timing-fonction:속도형태
animation-direction:방향지정
animation-play-state:애니메이션 진행상태
animation-delay:애니메이션 시작전 지연시간
animation-fill-mode:애니메이션이 끝낫을 때 요소의 위치

속도형태 지정
ease(시작과 종료 부드럽게)
linear(일정하게)
ease-in (서서히 시작)
ease-out (서서히 종료)
ease-in-out (서서히 시작하여 서서히 종료)

방향지정 속성
normal (정방향)
reverse (to에서 시작하여 from으로 끝남)
alternate (처음은 정방향 그 다음은 역방향)
alternate-reverse (처음은 역방향 그 다음은 정방향)

애니메이션 진행상태 속성
running (재색중)
paused (일시정지중)

애니메이션 끝났을 때 요소의 위치속성
forwards (애니메이션 시작 전까지는 원래 위치에서 대기 / 요소가 애니메이션 끝나는 위치에서 멈춘다.)
backwards (페이지가 로딩되면 곧장 애니메이션 시작 위치로 이동 / 끝나면 원래 위치로 돌아감)
both (위 둘 효과를 모두 적용)
none (애니메이션 시작 전까지는 원래 위치에 고정 / 끝나면 그 위치로 다시 돌아감 = 기본형태)