Я пытаюсь получить изображение (символ плюса), чтобы повернуть 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.