[CSS] transform 한번에 여러개(scale, skew, translate) 적용하는 matrix()

scale 크기변화 skew기울기 translate이동

 

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()); 순서로 이루어진다.

 

.box:hover:after{
  transform: matrix(1.3, 0.1, 0.3, 2, -100, 150);
}

위의 코드에 따라 적용되었으므로 

가로로 1.3배 커지고,

y축으로 10도 기울어지고,

x축으로 30도 기울어지고

x축으로 -100px

y축으로 150px 이동

 

 

 

각각 하나씩 나누어보면 아래와 같다

.box1:after{transform: scaleX(1.3);}
.box2:after{transform: skewY(10deg);}
.box3:after{transform: skewX(30deg);}
.box4:after{transform: scaleY(2)}
.box5:after{transform: translateX(-100px);}
.box6:after{transform:translateY(150px);}