可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I'm trying to get an image (a plus symbol) to rotate 45 degrees to create a cross symbol. I have so far managed to achieve this using the code below but its working on hover, I wanted to have it rotate on click.
Is there a simple way of doing so using CSS?
My code is:
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>
Here is the jsfiddle demo.
回答1:
If you want a css only solution you can use 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).
$( ".crossRotate" ).click(function() { if ( $( this ).css( "transform" ) == 'none' ){ $(this).css("transform","rotate(45deg)"); } else { $(this).css("transform","" ); } });
Fiddle
回答2:
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:
<img class="crossRotate" src="http://placehold.it/100" tabindex="1" />
.crossRotate { outline: 0; /* other styles... */ } .crossRotate:focus { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
WORKING DEMO.
Note: Using this approach, the image gets rotated onclick (focused), to negate the rotation, you'll need to click somewhere out of the image (blured).
Method #2: Hidden input & :checked pseudo-class
This is one of my favorite methods. In this approach, there's a hidden checkbox input and a <label> element which wraps the image.
Once you click on the image, the hidden input is checked because of using for attribute for the label.
Hence by using the :checked pseudo-class and adjacent sibling selector +, we could get the image to be rotated:
<input type="checkbox" id="hacky-input"> <label for="hacky-input"> <img class="crossRotate" src="http://placehold.it/100"> </label>
#hacky-input { display: none; /* Hide the input */ } #hacky-input:checked + label img.crossRotate { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
WORKING DEMO #1.
WORKING DEMO #2 (Applying the rotate to the label gives a better experience).
Method #3: Toggling a class via JavaScript
If using JavaScript/jQuery is an option, you could toggle a .active class by .toggleClass() to trigger the rotation effect, as follows:
$('.crossRotate').on('click', function(){ $(this).toggleClass('active'); });
.crossRotate.active { /* vendor-prefixes here... */ transform: rotate(45deg); }
WORKING DEMO.
回答3:
You can also affect differente DOM elements using :target pseudo class. If an element is the destination of an anchor target it will get the :target pseudo element.
<style> p { color:black; } p:target { color:red; } </style> <a href="#elem">Click me</a> <p id="elem">And I will change</p>
Here is a fiddle : https://jsfiddle.net/k86b81jv/
回答4:
As jeremyjjbrow said, :active pseudo won't persist. But there's a hack for doing it on pure css. You can wrap it on a <a> tag, and apply the :active on it, like this:
<a class="test"> <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" /> </a>
And the css:
.test:active .crossRotate { transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); }
Try it out... It works (at least on Chrome)!
回答5:
You can use JavaScript to do this, with onClick method. This maybe helps CSS3 transition click event
