I'm trying to make an image ( img tag ) rotate 180° when it's clicked.
$(document).off('click', '.taxonomie').on('click', '.taxonomie', function (e) {
$(".chevron-occasion").toggleClass("flip");
});
.mon-plateau-de-fromages .form-plateau-fromage .chevron-occasion {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.flip {
transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-12 b-gold taxonomie occasion">
<p class="number-left">1</p>
<div>
<p class="titre-taxonomie">Par occasion</p>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/icons/chevron.png" alt="chevron occasion" class="chevron-occasion">
</div>
<img src="<?php echo get_stylesheet_directory_uri(); ?>/img/icons/calendar.png" alt="calendar occasion" class="img-occasion">
</div>
See Question&Answers more detail:os