我想要获得一个图像(加号)旋转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","" );
- }
- });
