3d 애니메이션

3d 애니메이션 수강하다가 직접 만들어 보고 싶어서 하고 있는데 js로 rotate 효과를 주면 안되는건가요?ㅠㅠ

계속 css에 미리 뒷사진에 rotateY -180deg 하고 js 에서 clickme 버튼을 클릭했을때 3d애니메이션 강좌처럼 회전한뒤 뒷면만 보이게 하고싶은데 그게안되네요

사진은 앞사진을 회전시킬때 보이는 화면입니다

앞표지를 회전시킨뒤 계속 회전되지않고 뒷면만 나타내고 싶은데 어떻게 해야되나요

<div class="layer"></div>
    <div class="container">
        <div class="item front">
           
            <button class="front-btn">WELCOME!</button>
            <button class="back-btn">CLICK ME!</button>
        </div>
        <div class="item back">
           
        </div>
    </div>

   
    <script>
        // 처음에 검정이엿다가 버튼 누르면 서서히 밝아지는 효과  
        $('.front-btn').on('click', function(){
            $('.layer').css('z-index', '0')
            $('.layer').css('background', 'none')
            $('.front-btn').hide()
            $('.back-btn').show()
        })

        // CLICK ME 버튼 누르면 사진이 뒤집어져 다른 화면으로 변경
            $('.back-btn').on('click', function(){
                $('.front img').addClass('transform')
                $('.back-btn').hide()
            })
       
    </script>

.layer { background-color: rgba(0,0,0,0.8); position:relative; z-index:5; height: 100%; transition:all 2.5s;}
.container { background:#005704; height: 100%; width: 100%;}
.item { height: 100%; width: 100%;}

.item img { height:100%; display: block; margin: auto; width:70%;}
.front img { transition:all 1.5s;}
.front-btn { position:absolute; top:68%; background-color: white; left:45%; margin:auto; color:#005704; border:3px solid green; border-radius:5px; padding: 20px; font-size:30px; font-weight:bold; z-index:6;}

.container { position:absolute; top:0}
.front {position:absolute;}
.transform { transform: rotateY(180deg);}
.back-btn { display:none;position:absolute; top:68%; background-color: white; left:45%; margin:auto; color:#005704; border:3px solid green; border-radius:5px; padding: 24px;;font-size:30px; font-weight:bold; z-index:2;}