• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

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

23.12.31 17:43 작성 조회수 109

1

 

.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 다 넣어보면서 찾는건가요..? ㅠㅠ

 

course-thumbnail

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

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

강의실 바로가기

답변 2

·

답변을 작성해보세요.

0

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2023.12.31

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

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

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

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.12.31

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

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

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

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

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

이 글과 비슷한 Q&A