[Day 33] JS 로 만드는 3D 캐러셀

https://daheejo.github.io/FrontendSchool_2/carousel/index.html

Today's Color: 오늘 당신에게 맞는 색깔은?

일단 만들어본 3d 캐러셀! 

계속 회전하는데, 버튼으로 조정할 수 있는 캐러셀을 만들어보고자 했다.

(근데 아직 버튼 기능과 카드 뒷면 기능은 미완이다)

 

css에 키프레임 애니메이션을 적용하였는데,

문제는 가운데 정렬한 캐러셀이 애니메이션만 적용하면 자꾸 가운데를 벗어나곤 했다 ㅠ

 

그래서 멘토님께 여쭤본 결과,

 

@keyframes movingCarousel {
    from{
        transform: translate(-50%, -50%) rotateY(0deg) ;
    }
    to{
        transform: translate(-50%, -50%) rotateY(360deg) ;
    }
}

저렇게 transform 내에서 translate를 먼저 적어준 후 rotateY를 적어줬어야 했다!

(나의 경우는 순서를 거꾸로 적어줘서 안됐던 것!)

 

transform 속성을 쓸 때 이렇게 순서에 유의해야한다는 점을 배웠다...!