How do I make my image go FROM rotated to straight (HTML, CSS, JS,)

Question

On the home page of my website, I have an image that is suppose to be 'Broken' until you click it, I want It to start at 23Degrees then rotate to 0 and stay there. any ideas? Sorry if this is hard to read but Here is what I have:

Relevant CSS:

<style>
                 .crossRotate {
                -webkit-transition-duration: 1s;
                -moz-transition-duration: 1s;
                -o-transition-duration: 1s;
                 transition-duration: 1s;
                -webkit-transition-property: -webkit-transform;
                -moz-transition-property: -moz-transform;
                -o-transition-property: -o-transform;
                 transition-property: transform;
                 transform: rotate(23deg);
            }
            
            /*.crossRotate:active {
                transform: rotate(23deg);
                -webkit-transform: rotate(23deg);
                -ms-transform: rotate(23deg);
                 transform: rotate(23deg);
            }*/
            .crossRotate:active {
                transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                 transform: rotate(0deg);
                 font-size:50%;
            }
            nuggets{
                max-width:20px;
                max-height:15px;
                font-size:20px;
            }
</style>

Relevant JS (In head):

          <script>
              $( ".crossRotate" ).click(function() {
                    if (  $( this ).css( "transform" ) == 'none' ){
                        $(this).css("transform","rotate(0deg)");
                    } else {
                        $(this).css("transform","" );
                    }
                });
          </script>
    </head>

Relevant HTML:

        <p><img class="crossRotate" src="images/example.jpg" alt="ExamplerAlt"></p>

Remember: I want it to go FROM 23deg TO 0deg and STAY at 0 degrees

Thanks!

Answer 1

Please try this

Firstly set rotate 23deg. Then click image add class between active

Second, check active class in css by .crossRotate.active then set rotate 0deg.

 $( ".crosslink" ).click(function(e) { e.preventDefault(); $(this).children('.crossRotate').addClass("active"); });

 .crossRotate{ -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transform: rotate(23deg); -moz-transform: rotate(23deg); -o-transform: rotate(23deg); transform: rotate(23deg); }.crossRotate.active { transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(23deg); }.crosslink{outline:none;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#" class="crosslink"> <img class="crossRotate" src="https://i.stack.imgur.com/PR5cj.jpg" alt="ExamplerAlt"></p></a>

Answer 2

Try using @keyframes css property.you can use

@keyframes animation_name{
  from{
    transform: rotate(23deg);
  }
  to{
    transform: rotate(0deg);
  }
}

you can use transform: rotateX(23deg) or transform: rotateY(23deg) or 3d.Let me know if it works.