내 이미지를 회전에서 직선으로 만드는 방법 (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 (head 속) :

          <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도를 유지하고 싶습니다.

감사!

답변1

이것을 시도하십시오

먼저 rotate23deg를 설정합니다. 그런 다음 활성사이에있는 수업 추가 이미지를 클릭합니다.

둘째, .crossRotate.active 로 CSS의 활성 class를 확인합니다.그런 다음 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>

Expand snippet

답변2

@keyframescss 속성을 사용해보세요.

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

transform : rotateX (23deg)또는 transform : rotateY (23deg)또는 3d를 사용할 수 있습니다. 작동하는지 알려주세요.

 

 

 

 

출처 : https://stackoverflow.com/questions/63433923/how-do-i-make-my-image-go-from-rotated-to-straight-html-css-js