I am attempting to apply a rotation effect on a shape when clicked using jQuery and CSS. My goal is to select the element with the id of x and toggle the class rotate on and off. The rotate class utilizes the CSS transform property to achieve the desired rotation.
$('#x').click(function() {
$('#x').toggleClass('.rotate');
});.container {
height: 500px;
width: 960px;
margin: 0 auto;
display: flex;
background: skyblue;
}
#x {
margin: auto;
font-size: 9em;
color: green;
}
.rotate {
transform: rotate(7deg);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="x">x</div>
</div>