单击时使用纯 CSS 的 CSS3 过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21919044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 transition on click using pure CSS
提问by user2498890
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.
我正在尝试使图像（加号）旋转 45 度以创建十字符号。到目前为止，我已经使用下面的代码设法实现了这一点，但它在悬停时工作，我想让它在点击时旋转。
Is there a simple way of doing so using CSS?
有没有使用 CSS这样做的简单方法？
My code is:
我的代码是：
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
HTML
<body>
<img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</body>
Here is the jsfiddledemo.
这是jsfiddle演示。
采纳答案by jeremyjjbrown
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 clickand cssis the cleanest IMO).
但是当活动移动时，转换不会持续。为此，您需要 javascript（jquery click和css是最干净的 IMO）。
$( ".crossRotate" ).click(function() {
if ( $( this ).css( "transform" ) == 'none' ){
$(this).css("transform","rotate(45deg)");
} else {
$(this).css("transform","" );
}
});
回答by Hashem Qolami
Method #1: CSS :focuspseudo-class
方法 #1：CSS:focus伪类
As pure CSS solution, you could achieve sort of the effect by using a tabindexattribute for the image, and :focuspseudo-class as follows:
作为纯 CSS 解决方案，您可以通过使用tabindex图像的属性和:focus伪类来实现某种效果，如下所示：
<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);
}
工作演示。
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 & :checkedpseudo-class
方法#2：隐藏输入和:checked伪类
This is one of my favorite methods. In this approach, there's a hidden checkbox input and a <label>element which wraps the image.
这是我最喜欢的方法之一。在这种方法中，有一个隐藏的复选框输入和一个<label>包装图像的元素。
Once you click on the image, the hidden input is checked because of using forattribute for the label.
单击图像后，将检查隐藏的输入，因为for标签使用了属性。
Hence by using the :checkedpseudo-class and adjacent sibling selector+, we could get the image to be rotated:
因此，通过使用:checked伪类和相邻兄弟选择器+，我们可以旋转图像：
<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 #2(Applying the rotateto the label gives a better experience).
WORKING DEMO #2（将 应用于rotate标签可提供更好的体验）。
Method #3: Toggling a class via JavaScript
方法 #3：通过 JavaScript 切换类
If using JavaScript/jQuery is an option, you could toggle a .activeclass by .toggleClass()to trigger the rotation effect, as follows:
如果使用 JavaScript/jQuery 是一个选项，您可以切换一个.active类.toggleClass()来触发旋转效果，如下所示：
$('.crossRotate').on('click', function(){
$(this).toggleClass('active');
});
.crossRotate.active {
/* vendor-prefixes here... */
transform: rotate(45deg);
}
工作演示。
回答by kaheglar
Voila!
瞧！
div {
background-color: red;
color: white;
font-weight: bold;
width: 48px;
height: 48px;
transform: rotate(360deg);
transition: transform 0.5s;
}
div:active {
transform: rotate(0deg);
transition: 0s;
}<div></div>回答by Dario Corno
You can also affect differente DOM elements using :targetpseudo class. If an element is the destination of an anchor target it will get the :targetpseudo element.
您还可以使用:target伪类影响不同的 DOM 元素。如果元素是锚目标的目的地，它将获得:target伪元素。
<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/
这是一个小提琴：https: //jsfiddle.net/k86b81jv/
回答by LcSalazar
As jeremyjjbrow said, :activepseudo 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 :activeon it, like this:
正如 jeremyjjbrow 所说，:activepseudo 不会持久化。但是在纯 css 上做这件事有一个技巧。您可以将它包装在一个<a>标签上，并:active在其上应用 ，如下所示：
<a class="test">
<img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</a>
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 上）！
回答by Lucas Haas
You can use JavaScript to do this, with onClick method. This maybe helps CSS3 transition click event
您可以使用 JavaScript 通过 onClick 方法执行此操作。这可能有助于CSS3 过渡点击事件
