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

您可以使用旋转类上的:focus，这会使您的图像在点击时旋转，但要小心，单击外部会导致效果失效。

在The Snippet下面。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你做不到。 click不是状态，并且没有为其定义伪类，hover 。

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

编辑：因为显然我无法在评论中解释自己，所以这里的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);
}

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

Answer 3

您需要使用javascript来监听点击事件：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何在CSS中单击以在图像上进行转换？

4 个答案: