图片点击翻转效果

Posted millet-23

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片点击翻转效果相关的知识,希望对你有一定的参考价值。

此处写法是

css===写好样式放在一个新class名

1 @keyframes flipping{
2     from{transform:rotateY(0);}
3     to{transform:rotateY(180deg);}
4 }
5 .active{
6     animation: flipping .6s ease-in;
7 }

js===点击时给要翻转的元素添加class名称。

$(function(){
    $("#gold li img").click(function(){
        // $(this).addClass("active")
        this.className="active"
       
    //此处有$(this)和this,使用注意事项
    //可到此链接查看:https://www.cnblogs.com/gfl123/p/8080484.html
    })
})

 









以上是关于图片点击翻转效果的主要内容,如果未能解决你的问题,请参考以下文章

css3图片3D翻转效果

css3 如何让一个图片不断翻转

android 上下滑动按钮 按钮图片翻转180度从正面到反面 再滑动回到正面 如此循环 就代码 先谢谢了

怎样用CSS实现图片翻转

HTML和CSS实现图片翻转效果

Android_ImageView简单实现图片翻转