单击时使用纯 CSS 的 CSS3 过渡
Posted
技术标签:
【中文标题】单击时使用纯 CSS 的 CSS3 过渡【英文标题】：CSS3 transition on click using pure CSS 【发布时间】：2014-03-22 01:25:32 【问题描述】：我正在尝试将图像（加号）旋转 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);
<body>
<img class="crossRotate" src="images/cross.png" />
</body>
这是jsfiddle 演示。
【问题讨论】：
这是我从 SO 的新手那里看到的更好的问题之一。 【参考方案1】：您可以通过 onClick 方法使用 javascript 来执行此操作。 这可能有助于CSS3 transition click event
【讨论】：
【参考方案2】：如果你想要一个纯 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","" );
);
Fiddle
【讨论】：
使用那个jQuery就可以了，我已经按照你说的做了，它可以按我的意愿工作，还有一件事，所以你点击它一次它会以一种方式旋转45度，你会怎么做对其进行编码，以便您再次单击它并返回 45 度到其原始位置？感谢您的帮助 这似乎没有完成，只是在点击时进行原始的 45 度旋转。只需将其旋转 45 度，然后在下次单击时旋转 -45 度，然后重复该序列... 再试一次，我在你的小提琴上测试过。请务必将类添加到图像并删除活动的 css 规则 好的，这是我想要的，只是你必须点击并按住才能实现它，我只想点击一次，然后再次点击让它返回-45度，谢谢你的帮助:) 我根据你的添加了一个小提琴。顺便说一句，您接受答案会获得代表。【参考方案3】：正如 jeremyjjbrow 所说，:active pseudo 不会持续存在。但是在纯 css 上做这件事有一个技巧。您可以将其包装在 <a> 标签上，然后在其上应用 :active，如下所示：
<a class="test">
<img class="crossRotate" src="images/cross.png" />
</a>
还有css：
.test:active .crossRotate
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
试试看...它可以工作（至少在 Chrome 上）！
【讨论】：
不，只有 chrome... 没注意到。不错的电话 只是检查一下，这样的东西很容易被烧毁。 似乎无法在 Firefox 上运行，在 Chrome 和 Safari 上运行...在 Firefox 上，您需要单击并按住才能使其完全打开？【参考方案4】：方法#1：CSS :focus伪类
作为纯 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);
WORKING DEMO.
注意：使用这种方法，图像会在点击时旋转（聚焦），要取消旋转，您需要单击图像外的某个位置（模糊）。
方法#2：隐藏输入&:checked伪类
这是我最喜欢的方法之一。在这种方法中，有一个隐藏的复选框输入和一个包裹图像的 <label> 元素。
点击图片后，由于标签使用了for 属性，因此会检查隐藏的输入。
因此，通过使用:checked 伪类和adjacent sibling selector +，我们可以得到要旋转的图像：
<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 （将rotate 应用于标签可提供更好的体验）。
方法 #3：通过 JavaScript 切换类
如果使用 JavaScript/jQuery 是一个选项，您可以通过 .toggleClass() 切换 .active 类来触发旋转效果，如下所示：
$('.crossRotate').on('click', function()
$(this).toggleClass('active');
);
.crossRotate.active
/* vendor-prefixes here... */
transform: rotate(45deg);
WORKING DEMO.
【讨论】：
你有没有把它投入生产？ @jeremyjjbrown，对不起，我不明白你的意思。这是 updated demo。为transform 属性添加了 -moz 前缀。
我在问您是否愿意在生产环境中使用此解决方案？我只是好奇。
@jeremyjjbrown 我避免在我的项目中旋转图像 :) 我只是想展示 CSS 的能力。
同意，切换它们可能更干净。我只是想知道您认为以这种方式使用 tabindex 有多强大。【参考方案5】：
您还可以使用 :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>
这是一个小提琴：https://jsfiddle.net/k86b81jv/
【讨论】：
【参考方案6】：瞧！
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>【讨论】：
如果我只想旋转 180 度怎么办？【参考方案7】：您可以将WebkitTransform 与Transition (transition: all 2s;) 一起使用，通过动画进行所需的旋转。
<style>
div.a
width: 150px;
height: 80px;
background-color: yellow;
transition: all 2s;
</style>
<div class="a" id="box">Your Image Here</div>
<button onclick="rotate()">Rotate </button>
<script>
function rotate()
x= document.getElementById("box");
x.style.WebkitTransform = 'rotate(' + 20 +'deg)';
</script> 这种方法的优点是您可以通过编程方式进行操作。您可以使用 javascript 指定角度（尽管在您的特定情况下不需要这样做）。
【讨论】：
以上是关于单击时使用纯 CSS 的 CSS3 过渡的主要内容，如果未能解决你的问题，请参考以下文章