animation实现图片翻转

移入翻转：

代码如下：

 <style>
        div {
            position: relative;
            margin: 100px auto;
            width: 100px;
            height: 100px;
            overflow: hidden;
            border: 1px solid #ccc;
        }

        div img {
            position: absolute;
            left: 0;
            top: 0;
            transition: all 2s;
        }

        div a:first-child img{
            z-index: 1;
            backface-visibility: hidden;
        }

        div:hover img{
			transform: rotateY(180deg);
		}

    </style>

注释：

backface-visibility 指定当元素背面朝向观察者时是否可见；
语法：backface-visibility： visible | hidden；
visible：背面朝向用户时可见；
hidden：背面朝向用户时不可见；

    <div>
        <a href="#"><img class="a" src="./王者荣耀图片/1.jpg" alt=""></a>
        <a href="#"><img class="b" src="./王者荣耀图片/3.jpg" alt=""></a>
    </div>

自动翻转，移入暂停，移除继续翻转：

<style>
        div {
            position: relative;
            margin: 100px auto;
            width: 100px;
            height: 100px;
            overflow: hidden;
            border: 1px solid #ccc;
        }

        div img {
            position: absolute;
            left: 0;
            top: 0;
            transition: all 2s;
        }

        div a:first-child img {
            z-index: 1;
            backface-visibility: hidden;
        }

        div img {
            animation: imgRoate 4s infinite;
        }

        /* 定义动画 */
        @keyframes imgRoate {
            0% {
                transform: rotateY(0deg);
            }

            50% {
                transform: rotateY(180deg);
            }

            100% {
                transform: rotateY(360deg);
            }
        }
    </style>

 <div>
        <a href="http://www.baidu.com"><img class="a" src="./王者荣耀图片/1.jpg" alt=""></a>
        <a href="#"><img class="b" src="./王者荣耀图片/3.jpg" alt=""></a>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>

        // paused 规定动画已暂停。
        // running 规定动画正在播放。
        $(function () {
            $('div').mousemove(function () {
                console.log($(this));
                $(this).find('img').css({
                    animationPlayState: 'paused'
                })
            })

            $('div').mouseout(function () {
                console.log($(this));
                $(this).find('img').css({
                    animationPlayState: 'running'
                })
            })
        })
    </script>

注释：

语法：animation-play-state: paused|running;
paused:指暂停动画；
running：指定正在运行的动画