rotate, skewX, translate 값 찾기 질문드립니다... - 인프런

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

가상클래스 hover 활용한 실전 퍼블리싱 05(앱 UI 레이어 3D 호버 에니메이션)

rotate, skewX, translate 값 찾기 질문드립니다..

작성

207

.app-ui {
  /* border: 1px solid red; */
  width: 340px;
  height: 640px;
  transform: rotate(-30deg) skewX(20deg);
  /* transform: skewX(); */
  position: relative;
}
.app-ui:hover img:nth-child(1){
  transform: translate(40px, -40px);
}

.app-ui 요소를 rotate (-30deg) skewX(20deg) 해서

.app-ui:hover 밑에 이미지를 translate(40px, -40px) 한 것 같은데 이 때 숫자는 어떻게 40이라는 값이 나온걸까요?

수직으로 올리는 값을 어떻게 정하는 걸까요?

10 20 30 40 다 넣어보면서 찾는건가요..? ㅠㅠ

HTML/CSS jquery

답변 2

코딩웍스(Coding Works)

지식공유자

40이라는 숫자는 꼭 정해진건 아닙니다.

그냥 40픽셀 정도 띄우면 카드가 여러개니까 간격이 적당히 좋아 보여서 그런겁니다.

만약 20이라고 하면 여러장의 카드가 간격이 너무 좁을 것이고, 60이라고 하면 여러장의 카드가 간격이 너무 넓을 것입니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

같은 강의에서 transform 속성과 관련하여 수강생분들이 궁금해 하셨던 내용에 대한 답변이 있어서 해당 링크를 공유드립니다. 해당 답변에서는 .app-ui 요소에 rotate, skewX, translate 등의 transform 속성을 적용하는 방법에 대한 설명이 포함되어 있으니 도움이 될 것 같습니다.

질문자님이 언급하신 ‘숫자 40이 어떻게 나온 것인가’에 대한 직접적인 내용은 아니지만, transform 속성을 적용하는 방법과 원리에 대해 더 잘 이해하실 수 있을 거라 생각합니다.

질문 관련 답변 링크입니다: translate 질문합니다!

이 답변이 궁금증 해결에 도움이 되길 바랍니다.

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

rotate, skewX, translate 값 찾기 질문드립니다..