15. 변형 및 트랜지션 속성

해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 

엘리먼트 변형

각 변형'값'은 그 자체로 속성이며 각자 괄호 값들을 가질 수 있다. 이런 변형 값들은 transform속성과 연관된다.

• 각도 (Angle)
  각도(90 deg), 그래드(100 grad), 라디언(1.683rad)으로 정의할 수 있다. 음수 값 및 360 deg보다 큰 값을 사용할 수는 있지만 양수 값으로 변환된다. 
• 숫자 (Number)
  정수 또는 소수점 값으로 양수와 음수 모두 가능하다. 숫자는 주로 곱셈값으로 사용된다. 
• 길이
  상댓값(em, px, %)이나 절대 값(in, mm, cm)을 사용할 수 있다. 

많은 변형 속성 값들은 콤마로 구분해 여러 괄호 값을 지정할 수 있다. 보통 둘 또는 세 값은 X, Y, Z 축을 나타낸다. 값을 하나만 사용하면 세 축에 모두 해당 값을 사용한다. 

 

- 엘리먼트의 2D 변형 

/*
rotate()
:엘리먼트를 회전시킬 각도를 지정한다. 
양수 값은 엘리먼트를 시계 방량으로 회전시키고 음수 값은 엘리먼트를 반시계 방향으로 회전시킨다.

rotateX()
:또는 rotateY()는 엘리먼트를 X나 Y축 기준으로 회전시킬 각도를 지정한다. 
양수 값은 엘리먼트를 시계 방향으로 회전시키고 음수 값은 엘리먼트를 반시계 방향으로 회전시킨다. 

scale(), scaleX(), scaleY()
:너비(X) 및 높이(Y)에 곱할 숫자 값을 지정한다. 양수 값은 엘리먼트의 크기를 증가시킨다. 
음수 값도 크기를 증가 시키지만 축을 중심으로 엘리먼트를 반전시킨다. 
1보다 작은 소수점 숫자를 사용하면 크기가 줄어든다.

skew(), skewX(), skewY()
:엘리먼트의 X축 또는 Y축을 따라 엘리먼트를 왜곡시킬 각도를 지정한다. 
양수 값은 위와 왼쪽 방향으로 왜곡하고 음수 값은 아래와 오른쪽 방향으로 왜곡한다. 

translate(), translateX(), translateY()
:엘리먼트의 X축 또는 Y축을 따라 엘리먼트를 위치 조절할 길이 값을 지정한다. 
양수값은 엘리먼트를 아래, 오른쪽으로 움직이고 음수 값은 위, 왼쪽으로 움직인다.

matrix()
:3*3값 행렬로 앞의 변형 속성들을 단독으로 조합해 사용할 수 있는 단축 속성이다.
*/

aside {
-webkit-transform : rotate(-2deg);
-moz-transform : rotate(-2deg);
-o-transform : rotate(-2deg);
transform : rotate(-2deg);}

div.gallery figure {
-webkit-transform-origin : left 25%;
-moz-transform-origin : left 25%;
-o-transform-origin : left 25%;
transform-origin : left 25%;}
}

- 엘리먼트 3D 변형

/*
transform-style : 부모에 대해 자식 엘리먼트를 평평하게 놓을지 별도 3D공간에서 처리할지를 지정하는 속성

perspective : perspective()와 비슷하게 동작하지만 엘리먼트 자체가 아니라 엘리먼트의 위치 지정된 자식에 
투영점을 적용하는데 사용한다.

perspective-origin : 사용자가 엘리먼트의 자식들을 보는 X,Y위치를 지정하기 위해 perspective-origin속성에
값 하나 또는 두 개 사용해 perspective속성(transform값이 아니다)의 원점을 지정한다. 
perspective-origin에 사용하는 키워드는 transform-origin 키워드와 동일하다.

backface-visibility : 두 엘리먼트가 (카드처럼) 서로 등을 마주하고 위치해 함께 뒤집어야 하는 경우처럼 
특별한 경우에 사용한다. 
이 속성을 사용하면 rotateZ 또는 rotate3D를 사용해 뒤집힌 엘리먼트의 뒷면을 숨겨준다.
*/


div.gallery figure{
width : auto;
-webkit-transform-origin : left 25%;
-moz-transform-origin : 
-o-transform-origin : left 25%;
transform-origin : left 25%;
-webkit-transform-style : flat;
transform-style : flat;
-webkit-perspective : 5000;
perspective : 5000;
-webkit-perspective-origin : 25% 25%;
perspective-origin : 25% 25%;
-webkit-backface-visibility :visible;
backface-visibility :visible;
}

 

엘리먼트 상태간의 트랜지션 추가

과거에는 한 상태에서 다음 상태 사이의 중간 상태가 없었다. 트랜지션이 전혀 없었던 것이다.

현재 거의 모든 CSS속성에는 시간 흐름에 따라 한 스타일에서 다른 스타일로 변화를 줄 수 있는 색상, 길이, 위치 요소가 있다.

 

트랜지션이 일어나게 하려면 링크나 동적 의사 클래스를 사용해 엘리먼트에 상태 변화가 있게 해야 한다. 트랜지션은 시간 흐름에 따라 서로 다른 엘리먼트 상태에 스타일 변화를 주는 식으로 동작한다. 

예를 들어 엘리먼트의 기본 상태 색상값은 호버상태의 색상값이 되기까지 색상 스펙트럼에 있는 중간 색상값들을 거치게 된다.

 

• 기간
  트랜지션이 시작부터 끝까지 걸리는 시간을 보통 초단위로 설정한다. 이 값은 선택사항이며, 지정하지 않으면 기본값인 0이 지정된다. 
  
  
• 시간 함수
  트랜지션 진행에 따른 트랜지션 속도를 저의하는 함수다. 이 값은 선택사항이며, 지정하지 않으면 기본값인 linear이 지정된다. 
  linear : 등속도, ease : 점진적인 감속 ease-in : 가속, ease-out : 감속, ease-in-out : 가속 후 감속
  
  
• 지연 시간
  트랜지션이 시작하기 전에 얼마동안 멈출지를 지정한다. 이 값은 선택사항이며, 지정하지 않으면 기본값인 0이 지정된다. 

* {
-webkit-transition: color .25s ease-in, opacity .5s ease, -webkit-transform .25s ease-in-out 0;
-moz-transition: color .25s ease-in, opacity .5s ease, -moz-transform .25s ease-in-out 0;
-o-transition: color .25s ease-in, opacity .5s ease, -o-transform .25s ease-in-out 0;
transition: color .25s ease-in, opacity .5s ease, transform .25s ease-in-out 0;
}