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

Question

我正在尝试将图像旋转 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

Answer 1

你不能。 click 不是一个状态，也没有为其定义伪 class，hover is.

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

EDIT: Since apparently I couldn't explain myself in the comments, here's Pyere example done with a checkbox instead. It works a little different, maybe better maybe worse (depending on the exact effect required) and in any case "limited" compared to a JS click handler

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);
}

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

Answer 2

您需要 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>

Answer 3

纯 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" />

Answer 4

您可以在旋转 class 上使用 :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>

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

How to do onclick in CSS to do transition on image?

css

transition

rotation

css-transitions