<div class="kurukuru"></div>
/* reset css */
* { // この指定は記事と関係ありません
margin: 0;
padding: 0;
}
body { // この指定は記事と関係ありません
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 記事に関係あるコードはここから */
.kurukuru {
width: 100px;
height: 100px;
background-color: red;
transition: transform 0.4s;
}
.kurukuru.is-active {
transform: rotate(45deg);
}
View Compiled
$(".kurukuru").click(function(){
$(".kurukuru").addClass("is-active");
});
// document.querySelector(".kurukuru").addEventListener("click", function(event){
// document.querySelector(".kurukuru").classList.add("is-active");
// });
This Pen doesn't use any external CSS resources.