[CSS3] Transform 속성

Transform

 

Transform 속성

1. scale()  :  X 또는 Y축으로 확대/ 축소

transform: scaleX(2);          /* X축으로 비율만큼 확대, 축소 */
transform: scaleY(2);          /* y축으로 비율만큼 확대, 축소 */
transform: scale(2, 2);        /* x축, y축으로 비율만큼 확대, 축소 */

 

 

2. rotate()  : 지정 요소 회전

transform: rotateX(15deg);  /* x축 기준으로 15deg 만큼 회전 */
transform: rotateY(15deg);  /* y축 기준으로 15deg 만큼 회전 */
transform: rotate(-15deg);  /* -15deg 만큼 회전 */

 

 

3. translate() : 지정 요소 X 또는 Y축으로 이동

transform: translateX(10px);        /* X축으로 이동 */
transform: translateY(10px);        /* Y축으로 이동 */
transform: translate(20px, -10px);  /* X축, Y축으로 이동 */

 

 

4. skew() : 지정 요소 X 또는 Y축으로 기울이기

transform: skewX(15deg);          /* x축으로 15deg 만큼 기울이기 */
transform: skewY(15deg);          /* y축으로 15deg 만큼 기울이기 */
transform: skew(15deg, 15deg);    /* x축, y축으로 15deg 만큼 기울이기 */

 

transform-origin 속성 

지정요소의 기준점 변경하기

transform-origin: right bottom;  // px, 백분율(%), top, left, center, right, bottom