单击时使用纯 CSS 的 CSS3 过渡答案

【问题标题】：CSS3 transition on click using pure CSS单击时使用纯 CSS 的 CSS3 过渡
【发布时间】：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);
}

HTML

<body>
   <img class="crossRotate" src="images/cross.png" alt="Cross Menu button" />
</body>

这是jsfiddle 演示。

【问题讨论】：

这是我从 SO 的新手那里看到的更好的问题之一。

标签： css rotation css-transitions transition

【解决方案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" alt="Cross Menu button" />
 </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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

如果我只想旋转 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 指定角度（尽管在您的特定情况下不需要这样做）。

【讨论】：

方法#1：CSS :focus伪类

方法#2：隐藏输入&:checked伪类

方法 #3：通过 JavaScript 切换类

方法#1：CSS `:focus`伪类

方法#2：隐藏输入&`:checked`伪类