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

    .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)
   }

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

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