如何在CSS中做onclick对图像进行过渡

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

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

JSFiddle

你可以在你的旋转类中使用: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对鼠标点击的反应(比如使用一个复选框)，但是你可以用这种方式创建的效果是有限的。

编辑:因为显然我无法在评论中解释自己，这里是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>

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

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

相关内容

最新更新

热门标签：