我想要获得一个图像(加号)旋转45度以创建交叉符号。我到目前为止使用下面的代码来实现这一点，但是它的工作在悬停，我想让它旋转点击。
有没有一个简单的方法来使用CSS？
我的代码是：
CSS
img {
display: block;
margin: 20px;
}
.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;
}
.crossRotate:hover {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
HTML
<body> <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" /> </body>
这是jsfiddle演示。
解决方法
如果你想要一个只有CSS的解决方案，你可以使用
active
.crossRotate:active {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
但是，当活动移动时，转换将不会持续。为此，您需要javascript(jquery click和css是最干净的IMO)。
$( ".crossRotate" ).click(function() {
if ( $( this ).css( "transform" ) == 'none' ){
$(this).css("transform","rotate(45deg)");
} else {
$(this).css("transform","" );
}
});
