我正在尝试将图像(加号)旋转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演示.