inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

>앱 UI 레이어 3D 호버 에니메이션 트랜지션 효과질문입니다

160

huni0149

작성한 질문수 14

1

    .app-ui {
      position: relative;
      width: 400px;
      height: 600px;
      transform: rotate(-30deg) skew(20deg);
      transition: 0.5s;
    }

    .app-ui img {
      position: absolute;
      transition: 0.5s;
    }
    
    .app-ui:hover img:nth-child(1) {
      transform: translate(40px, -40px);
      opacity: 0.2;
    }

    .app-ui:hover img:nth-child(2) {
      transform: translate(80px, -80px);
      opacity: 0.4;
    }

    .app-ui:hover img:nth-child(3) {
      transform: translate(120px, -120px);
      opacity: 0.6;
    }

    .app-ui:hover img:nth-child(4) {
      transform: translate(160px, -160px);
   }

마지막에 img태그가 트랜지션 효과가 적용되는 이유가 궁금합니다.

제가 알기로 트랜지션효과는 a에서 b로 이동하는 효과이기때문에 a지점이 반드시 같은 속성값이

코딩에 입력되있어야 적용이되는걸로 알고 있는데. 

ex)top:0 -> top: 50%, traform:tranlateY(0) -> tranform:translateY(50%) 

위에 값을보면 img 태그는 hover에만 tranform:tranlate가 적용되있는데 왜 트랜지션 효과가 적용되는건가요?

    .app-ui img {
      position: absolute;
      transition: 0.5s;
tranform:translate(x , y)
   }

이거처럼 값을 적용시킨이후에 해야 트랜지션 효과가 적용되는게 아닌가요? 

HTML/CSS jquery

답변 1

0

코딩웍스(Coding Works)

호버를 시킬 곳에 트랜지션 길이 책 공통적으로 적용해 놓은 겁니다.

nth-child에 개별로 트랜지션을 주는 건 이미지 하나 하나에 트랜지션 값이 다르기 때문에 개별적으로 적용하기 위해서입니다.

모든 요소에 기본적으로 transform: translate(0, 0)이 기본값으로 들어 있습니다.

0

huni0149

감사합니다 

span 태그에 여백이 들어간 것 같은데 왜 그런건가요?

1

163

5

class 값 한 번에 부여하는법

2

138

1

@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.

1

123

1

div#css-checker-widget의 해결방

1

121

2

input의 포커스되었을때 검정선이 사라지지 않아요

0

138

2

강의듣는법

1

127

1

아코디언 만들기 100%이하의 화면으로 보았을때

1

127

2

input checked 질문합니다.

0

127

1

Bracket Pair Colorizer - 비주얼 스튜디오

1

214

2

Part 1 영상 안나옵니다

1

134

1

제이쿼리 작동이 안됩니다

1

269

3

강의 내용 질문있습니다.

1

188

2

일정 부분만 주석하는 방법

1

307

2

폰트어썸

1

192

2

인접선택자에 대한 질문드립니다!

1

171

2

delay 적용 안됨

1

170

1

rotateY(360deg)가 적용이 안됩니다!

1

242

2

세로이동할때 height값

1

180

2

폰트어썸이 안되요..

1

572

2

화면 정중앙에 오게끔 할수있나요?

1

209

1

어코디언 네비게이션 중

1

157

1

라이브서버 문제

1

304

2

넷플릭스 어코디언 예제 질문

1

138

1

이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?

1

198

1