如何在 CSS 中进行 onclick 以对图像进行转换？答案

【问题标题】：How to do onclick in CSS to do transition on image?如何在 CSS 中进行 onclick 以对图像进行转换？
【发布时间】：2015-11-03 14:38:03
【问题描述】：

我正在尝试将图像旋转 180 度。下面的代码是悬停的，点击图片时怎么办？

有没有使用 CSS 的简单方法？

CSS

img {
    display: block;
}

.rotate {
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

.rotate:hover {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

HTML

<body>
   <img class="rotate" src="/images/object.png" />
</body>

JSFiddle

【问题讨论】：

标签： css rotation css-transitions transition

【解决方案1】：

您可以在旋转类上使用:focus，这将使您的图像在点击时旋转，但请注意，点击外部会导致效果丢失。

片段下方。

img {
    display: block;
margin: 20px;
}

.rotate {
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    outline: 0;
}

.rotate:focus {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

<body>
    <img class="rotate" src="https://www.google.com/images/srpr/logo11w.png" tabindex="1" />
</body>

【讨论】：

不错但很脆弱。只需按几下 TAB 键即可触发效果。这里唯一“真正”的答案是这是不可能的。
嗯@Amit 我完全同意，我喜欢集体学习，这就是为什么我会投票给你的答案，我建议你的答案应该被标记为正确:)

【解决方案2】：

你不能。 click 不是一个状态，也没有为它定义伪类，悬停 is。

有一些技巧可用于使用纯 CSS 模拟对鼠标点击的反应（例如使用复选框），但您可以通过这种方式创建的效果是有限的。

编辑：由于显然我无法在 cmets 中解释自己，这里是 Pyere 示例，而是使用复选框完成的。它的工作方式有点不同，可能更好，也可能更糟（取决于所需的确切效果），并且在任何情况下与 JS 点击处理程序相比“有限”

img {
    display: block;
    margin: 20px;
}

.rotate {
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    outline: 0;
}

input[type=checkbox] {
  display: none;
}
input[type=checkbox]:checked+label>img {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

&lt;input type="checkbox" name="chkimage" id="chkimage"/&gt;&lt;label for="chkimage"&gt;&lt;img class="rotate" src="https://www.google.com/images/srpr/logo11w.png"/&gt;&lt;/label&gt;

【讨论】：

@Legionar - 你是什么意思？
你不能“真正”做到这一点，因为（正如我回答的那样）点击不是一种状态，也没有伪类。你可以以各种方式模拟它（这也是我的回答的一部分），但你总是会以一种或另一种方式受到限制。

【解决方案3】：

你需要javascript来监听点击事件：

var rotate = document.getElementById('rotate');
rotate.addEventListener('click', function() {
  rotate.classList.add('rotated');
});

img {
  display: block;
}
.rotate {
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
}
.rotated {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

<body>
  <img class="rotate" id="rotate" src="https://www.google.com/images/srpr/logo11w.png" />
</body>

【讨论】：

【解决方案4】：

纯 CSS 没有解决方案。你可以用 jQuery 来做，方法是 .click()。

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

img {
    display: block;
    margin: 20px;
}

img {
    -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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class='rotate' src="https://www.google.com/images/srpr/logo11w.png" alt="Google" />

【讨论】：

一切皆有可能，如果你相信的话……我知道 jQuery，我的问题是 CSS。