如何使图片从旋转变为直线HTML，CSS，JS等

问题描述

在我网站的主页上，我有一张图片，该图片在您单击之前一直被认为是“残破的”，我希望它以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>

记住：我希望它从23deg到0deg并保持在0度

谢谢！

解决方法

请尝试此操作

首先将rotate设置为23度。然后在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>

,

尝试使用@keyframes css属性。可以使用

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

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