单击使用纯CSS的CSS3过渡

一尘不染

单击使用纯CSS的CSS3过渡

css

我正在尝试将图像（加号）旋转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>

阅读 271

2020-05-16

共1个答案

一尘不染

如果您只想使用CSS解决方案，可以使用active

.crossRotate:active {
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
}

但是，当活动移动时，转换将不会持续。为此，您需要javascript（jqueryclick和css是最干净的IMO）。

$( ".crossRotate" ).click(function() {
    if (  $( this ).css( "transform" ) == 'none' ){
        $(this).css("transform","rotate(45deg)");
    } else {
        $(this).css("transform","" );
    }
});

2020-05-16