10:53 에서 이미지들에가 각각 transform을 설정하는데
transform:translate에서 x축에는 양수값 40px씩 증가하는데&nbsp;
y축에서는 -40px씩 음수값으로 설정해서 40px씩 증가하는게&nbsp;
이해하기가 어렵습니다 ㅠ.ㅜ

.app-ui {
&nbsp; transform: rotate(-30deg) skewX(20deg) scale(0.7);
}
.app-ui:hover img:nth-child(1) {
&nbsp; transform: translate(40px, -40px);
&nbsp; opacity: 0.2;
}
이미지가 y축으로는 위로 올라가니까 음수를 넣는거잖아요.&nbsp;
그런데 x축 좌표를 왜 양수를 넣는지 좀 헛갈리실 수 있습니다.
위에 있는 .app-ui에서 rotate(-30deg)를 없애시면 마우스 올려보시면 이미지들이 x축으로는 오른쪽으로 이동한다는걸 확인하실 수 있을거에요.
rotate(-30deg) 때문에 왼쪽으로 가니까 음수로 넣어야 하는거 아닌가라고 착각하실 수 있습니다.

인프런 커뮤니티 질문&답변

translate 질문합니다!