使用纯CSS单击CSS3转换-CSS3transitiononclickusingpureCSS

28  

If you want a css only solution you can use active

如果您想要一个只有css的解决方案，您可以使用active

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

But the transformation will not persist when the activity moves. For that you need Javascript (jquery click and css is the cleanest IMO).

但这种转变不会在活动发生时持续下去。为此，您需要Javascript (jquery单击和css是最干净的IMO)。

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

Fiddle

小提琴

24  

Method #1: CSS :focus pseudo-class

As pure CSS solution, you could achieve sort of the effect by using a tabindex attribute for the image, and :focus pseudo-class as follows:

作为纯粹的CSS解决方案，您可以通过使用tabindex属性来实现图像的效果，并且:焦点伪类如下:

And the css:

css:

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

Try it out... It works (at least on Chrome)!

试试……它可以工作(至少在Chrome上)!

0  

You can use Javascript to do this, with onClick method. This maybe helps CSS3 transition click event

使用onClick方法，您可以使用Javascript实现这一点。这可能有助于CSS3转换单击事件