css点击div旋转 |ie css透明

.rotate {
width: 200px;
height: 200px;
background-color: #008CBA;
transition: transform 1s;
}
.rotate.clicked {
transform: rotate(180deg);
}

上面的代码中，大家首先定义了一个class为“rotate”的div，设置了它的宽高和背景颜色，并且设置了一个transition属性，使得在类名被修改后可以有一个过渡的效果。

接着大家定义了一个class为“clicked”的div，其中将transform属性设置为旋转180度。大家将在JavaScript中添加或移除这个class。

const div = document.querySelector('.rotate');
div.onclick = function() {
div.classList.toggle('clicked');
}

最后，大家使用JavaScript为div添加了一个onclick事件，使得当div被点击时，它的类名会发生变化，从而达到旋转的效果。

以上就是使用CSS实现点击div旋转的方法，通过学习这个例子，大家可以更好地理解CSS的动画效果。