[두잇 HTML5+CSS3 웹표준의 정석] Part13

변형

  2차원 변형과 3차원 변형  

2차원 변형 : 단순희 수평이나 수직으로 이동하고 회전하는 것이다. x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 내려갈수록 값이 커진다.

3차원 변형 : 원근감을 주는 z축을 추가해 변형 시키는것이다. z축은 앞뒤로 이동하는데 보는 사람 쪽으로 다가올수록 값이 더 커지고 뒤로 갈수록 값이 작아진다.

 

transform과 변형 함수

: transform 변형함수와 함께 사용한다.

기본형 )
transform: 변형 함수;

2차원 변형 함수 : 최신 브라우저에서는 지원되지만 인터넷 익스플로러9를 비롯한 이전 브라우저를 위해 브라우저 접두사를 붙여야한다.

3차원 변형 함수 : 이전 브라우저를 위해 -webkit- -moz-등의 브라우저 접두사를 붙여야하지만 익스플로러의 경우 10이상에서는 3차원 변형 함수를 지원하므로 -ms- 접두사를 안 붙여도된다. 

 

translate 변형 함수

: 요소 이동시키기

- translate(tx, ty)의 경우 ty값이 주어지지 않으면 0으로 간주한다.

기본형 )
transform: translate (tx, ty)
transform: translate3d (tx, ty, tz)
transform: translateX (tx)
transform: translateY (ty)
transform: translateZ (tz)

 

scale 변형 함수

: 요소 확대 / 축소하기

- 1보다 크면 확대되고 1보다 작으면 축소된다.

-  translate(sx, sy)의 경우 sy값이 주어지지 않으면 sx와 같다고 간주한다. 예를들어 scale(2.0) 일경우 scale(2,2)과 같다고 간주한다.

기본형 )
transform: scale (sx, sy)
transform: scale3d (sx, sy, sz)
transform: scaleX (sx)
transform: scaleY (sy)
transform: scaleZ (sz)

 

rotate 변형 함수

: 요소 회전하기

- 2차원 함수일 때와 3차원 함수일 때의 기본형이 다르다.

- 각도가 양수일 경우 시계방향, 음수일 경우 시계 반대 방향이다.

* 일반적으로 각도(degree)나 래디언(radian) 값을 사용하는데 1래디언은 180도이다 *

2차원 함수 기본형 )
transform: rotate(각도)

3차원 함수 기본형 )
transform: rotate (rx, ry)
transform: rotate3d (rx, ry, rz)
transform: rotateX (각도)
transform: rotateY (각도)
transform: rotateZ (각도)

 

skew 변형 함수

: 요소를 비틀어 왜곡하기

- 2차 변형만 가능하고 양쪽 방향이나 한쪽 방향으로만 비틀 수 있다.

- transform: skew(sx, sy)중에 두번째 값이 주어지지 않으면 0으로 간주한다.

기본형 )
transform: skew(ax, ay)
transform: skewX(ax)
transform: skewY(ay)

 

 

 

---

 

변형과 관련된 속성들

 

transform-origin 속성

: 변형 기준점 설정하기

- 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있다.

기본형 )
transform-origin : <x축> <y축> <z축> | initial | inherit ;

<x축>	원점 기준 x 좌푯값으로 길이 값이나 <백분율>, left, center, right
<y축>	원점 기준 y 좌푯값으로 길이 값이나 <백분율>, top, center, bottom
<z축>	원점 기준 z 좌푯값으로 길이 값만 사용할 수 있다.

 

perspective, perspective-origin 속성

: 원근감 표현하기

perspective:  3차원 변형에서 사용하는 속성으로 사용자가 있는 방향이나 반대 방향으로 잡아당기거나 밀어내 원근감을 갖게 한다.

- 0보다 커야 하며 값이 클수록 사용자로부터 멀어진다.

기본형 )
perspective: <크기> | none;

<크기>	원래 위치에서 사용자가 있는 방향으로 얼마나 이동하는지 픽셀크기로 지정한다.
none	기본값이다.

 

perspective-origin: 이 속성을 이용하면 bottom 위치를 지정할 수 있기 때문에 좀 더 높은 곳에서 원근을 조절하는 듯한 느낌을 만들 수 있다. perspective 속성이 함께 지정되어 있어야 한다.

<x축 값>	길이값이나 백분율, left, right, center입니다. 기본값은 50%이다.
<y축 값>	길이값이나 백분율, top, bottom, center입니다. 기본값은 50%이다.

 

transform-style 속성

: 3D 변형 적용하기

- 3D변형을 하위 요소에도 적용할 수 있다.

flat	하위 요소를 평면 처리한다.
preserve-ed	하위 요소들에 3D효과를 적용한다.

* flat 속성은 하위요소에 다른 속성이 지정되어있어도 상위요소에 의해 적용되지 않고 덮여진다. *

 

backface-visibility 속성

: 요소의 뒷면 표시하기

- 요소의 뒷면을 보이고 싶지 않을 때 적용한다.

visible	뒷면을 표시한다. 기본값이다.
hidden	뒷면을 표시하지 않는다.

 

 

 

---

트랜지션

 

트랜지션이란?

스타일 속성이 바뀌는 것을 말한다. 예를 들어서 파란색 도형에 마우스를 올려두면 하늘색 도형으로 변하고 다시 마우스를 치우면 하늘색으로 변한다.

 

transition-property 속성

: 트랜지션을 적용할 속성 지정하기

- 어느 속성에 트렌지션을 적용할 것인지 지정해주는 것이다.

* 이 속성을 사용하지 않을 경우 모든 속성이 트랜지션 대상이 된다. *

기본형 )
transition-property : all | none | <기본형>;

all none <속성 이름>

transition-property를 생략할 경우, 요소의 모든 속성이 대상이된다.  아무 속성도 바뀌지 않는다. 트랜지션 효과를 적용할 속성 이름을 지정한다. 여러개일 경우, 쉼표로 구분해서 나열한다.

 

transition-duration 속성

: 트랜지션 진행 시간 지정하기

- 속성이 자연스럽게 바뀌기 위해서 넘어가는 시간을 지정해준다.

* 트래지션이 여러개라면 transition-duration 또한 쉼표로 구분해 순서로 여러개를 나열할 수 있다. 음수 값은 0으로 간주된다. *

기본형 )
transition-duration : <시간>;

transition-property속성값이 4갠데 transition-duration 값이 2개만 지정됐다면?
예시 )
transition-property : backgroun-color, transform, width, height;
transition-duration : 2s, 3s;

- 2s,3s가 반복적으로 적용된다. 즉, backgorund-color와 width는 2s,  transform과 height는 3s이다.

 

transition-timing-function 속성

: 트지션 속도 곡선 지정하기

- 이 속성 없이는 트랜지션을 실행했을 때 처음에는 천천히 시작해 점점 빨라지다가 다시 느려진다. 하지만 이 속성을 이용하면 시작, 중간, 끝의 속도를 지정할 수 있다.

기본형 )
transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier (n,n,n,n)  

linear ease ease-in ease-out ease-in-out cubic-bezier (n,n,n,n)

시작부터 끝까지 똑같은 속도이다. 천천히 시작하고 점점 빨라지다 천천히 끝난다. 기본값이다. 시작을 느리게 한다. 느리게 끝난다. 베지에 함수를 직접 정의한다. n에서 사용할 수 있는 값은 0~1이다.

 

transition-delay 속성

: 지연 시간 설정하기

- 트랜지션이 언제부터 시작할 것인지를 지정한다. 초(seconds)나 밀리초(milliseconds)를 사용할 수 있다. 만약 2s로 지정한다면 마우스를 올려놓고 2초뒤에 트랜지션이 실행된다.

기본형 )
transition-delay : <시간> ;

 

transition 속성

: 트랜지션 한꺼번에 표기하기

- 트랜지션을 한꺼번에 표기할 경우 순서대로 나열해야한다. 4개 속성 중 빠진 것이 있다면 기본값을 사용한다.

기본형 )
transition : <transition-property> | <transition-duration> | <transition-timing-function> | <transition-delay>

 

 

 

---

애니메이션

 

CSS와 애니메이션

트랜지션과 애니메이션의 다른점은 트랜지션은 시작과 끝은 지정하면 중간 스타일은 자동으로 추가해 전체적으로 부드럽게 변하는것은 애니메이션과 비슷하지만 애니메이션은 중간중간에 스타일을 바꿀 수 있는데 이 바뀌는 지점을 키프레임(keyframe)이라고 한다.

 

@keyframe 속성

: 애니메이션 지점 설정하기 

- 시작과 끝을 비롯해 상태가 바뀌는 부분이 있다면 @keyframe 속성을 이용해 바뀌는 지점을 설정한다.

- '이름'으로 애니메이션을 구별해주고 스타일이 바뀌는 지점을 '선택자'로 입력합니다. 예를 들어 중간위치를 두고 싶다면 시작 위치를 0%(from), 중간지점을 50%, 끝 지점을 100%(to)로 사용한다.

@keyframe <이름> { <선택자> { <스타일> } }

예시 )
@frmaekey change-gb { 
from {bcakground-color: blue;
	  border: solid black 1px:
      }

 

animation-name 속성

: 애니메이션 이름 지정하기

- 이 속성을 사용하면 왼쪽 소스로 정의한 애니메이션을 오른쪽 소스처럼 사용할 수 있다.

@keyframe change-bg {...}

div{        ...       animation-name: change-bg;       animation-duration: 3s; }

 

animation-duration 속성

: 애니메이션 실행 시간 설정하기

- 트랜지션처럼 애니메이션을 얼마동안 재생할 것인지 초(s)나 밀리초(ms)로 지정한다.

기본형 )
animation-duration: <시간>

예시 )
div{
      ....
      animation-duration: 3s;
    }

 

animation-direction 속성

: 애니메이션 방향 지정하기

- 애니메이션이 끝난 후의 설정을 바꾼다. 이 속성을 사용하면 원래 위치로 되돌아가거나 반대 방향으로 애니메이션을 한번 더 실행할 수 있다.

기본형 )
animation-direction : normal | alternate

normal alternate

애니메이션이 끝나면 원래 위치로 돌아간다. 기본값이다. 끝나면 왔던 방향으로 되돌아가면서 애니메이션을 실행한다.

 

animation-iteration-count 속성

: 반복 횟수 지정하기

- 기본적으로 애니메이션은 한 번만 실행하고 끝나지만 이 속성을 이용해서 횟수를 지정할 수 있다.

기본형 )
animation-iteration-count : <숫자> | infinite

 

animation-timing-function 속성

: 애니메이션 속도 곡선 지정하기

트랜지션과 마찬가지로 시작, 중간, 끝의 속도를 선택할 수 있다.

기본형 )
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier (n,n,n,n)

 

duration 속성

: 애니메이션 관련 속성 한꺼번에 표기하기

- 나열된 속성 순서는 중요하지 않지만 시간 값이 두 개라면 첫 번째 시간은 <animation-duration>, 두번째 시간은 <animation-delay> 속성으로 간주한다.