如何使我的图像从旋转到直（HTML，CSS，JS，）

Question

在我网站的主页上，我有一个图像在您单击它之前应该是“损坏的”，我希望它从 23 度开始然后旋转到 0 并停留在那里。有任何想法吗？抱歉，如果这很难阅读，但这是我所拥有的：

相关 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>

相关 JS（在头部）：

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

相关 HTML：

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

记住：我希望它从 23 度变为 0 度并保持在 0 度

谢谢！

Answer 1

请试试这个

首先设置rotate 23deg。然后点击active之间的图片添加类

其次，通过.crossRotate.active检查css中的活动类 然后设置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

尝试使用@keyframescss 属性。你可以使用

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

您可以使用 transform: rotateX(23deg) 或 transform: rotateY(23deg)或 3d 。让我知道它是否有效。