transform

1. transform 속성

    컨텐츠 요소를 이동(translate), 회전(rotate), 확대(scale), 기울기(skew) 등의 효과를 줄 수 있다.

    애니메이션 작업 시 가장 많이 쓰는 오쇼이며, 요소를 이동시키거나 회전 시킬 수 있고 원근점(perspective)를 사용하여

    3D까지 구현 할 수 있다.

    즉, 요소의 움직임을 표현한다.

 

2. 기본문법 

transform : none | matrix() | translate() | translateX() | translateY() | scale() | scaleX() | scaleY() | rotate() | skew() | skewX() | skewY() | matrix3d() | translate3d() | translateZ() | scale3d() | scaleZ() | rotate3d() | rotateX() | rotateY() | rotateZ() | perspective()

 

3. 문법 예시

translate(x,y) transform: translate(10px, 20px);	X좌표, Y좌표 이동을 나태냅니다.
translate(x,y,z) transform: translate3d(10px, 20px, 30px);	X좌표, Y좌표, Z좌표 이동을 나태냅니다.
translateX(x) transform: translateX(10px);	X좌표 이동을 나태냅니다.
translateY(y) transform: translateY(10px);	Y좌표 이동을 나태냅니다.
translateY(z) transform: translateZ(10px);	Z좌표 이동을 나태냅니다.

4. 적용 예시

 

- icon에 마우스 오버 시, transform을 이용해서 이름들이 이동할 수 있도록 동작 하도록 만들어보자.

 

.header .header_icon {
    text-align: center;margin-top: 40px; margin-bottom: 45px;
} 
/* 헤더 아이콘 위치 지정 */
.header .header_icon li {
    display: inline; margin: 0 2px;
}
/* li태그는 블록구조이므로 가로로정렬시켜주기위해 display: inline으로 설정 */
.header .header_icon li a {
    background-color: #3192bf; border-radius: 50%;
    width: 60px;height: 60px;color: #fff;
    display: inline-block;font-size: 35px;line-height: 60px;position: relative;
}
/*  */
.header .header_icon li a span {
    position: absolute; left: 50%; top: -40px;transform: translateX(-50%);
    /* span에 이름의 위치를 잡아준다.  */
    font-size: 12px;line-height: 1.6;background: #3192bf;
    padding: 3px 9px; border-radius: 6px 0;opacity: 0;
    transition: all 0.3s ease;
}

.header .header_icon li a span:before {
    content: "";position: absolute;left: 50%;bottom: -5px;
    margin-left: -5px; 
    border-top: 5px solid #3192bf;border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
/* span에 border-radius 아래 화살표 부분을 만들어주기위함 */
.header .header_icon li a:hover span{
    opacity: 1;top: -33px;
}
.header .header_icon li a:hover {
    box-shadow: 0 0 0 3px rgba(75,154,191,0.9) inset, 0 0 0 100px rgba(0,0,0,0.1) inset;
}