인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

huni0149님의 프로필 이미지
huni0149

작성한 질문수

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

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

작성

·

111

1

    .app-ui {
      positionrelative;
      width400px;
      height600px;
      transformrotate(-30degskew(20deg);
      transition0.5s;
    }

    .app-ui img {
      positionabsolute;
      transition0.5s;
    }
    
    .app-ui:hover img:nth-child(1) {
      transformtranslate(40px-40px);
      opacity0.2;
    }

    .app-ui:hover img:nth-child(2) {
      transformtranslate(80px-80px);
      opacity0.4;
    }

    .app-ui:hover img:nth-child(3) {
      transformtranslate(120px-120px);
      opacity0.6;
    }

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

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

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

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

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

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

    .app-ui img {
      positionabsolute;
      transition0.5s;
tranform:translate(x , y)
   }

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

답변 1

0

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

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

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

huni0149님의 프로필 이미지
huni0149
질문자

감사합니다 

huni0149님의 프로필 이미지
huni0149

작성한 질문수

질문하기