翻牌子

最新推荐文章于 2022-10-25 16:06:13 发布

hchu

最新推荐文章于 2022-10-25 16:06:13 发布

阅读量404

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_40688956/article/details/78611612

版权

html 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*
             *  英雄和详情是叠加的
             *    英雄是正面
             *      详情是背面
             *  当光标进入的时候
             *      英雄变成背面
             *    详情变成正面
             *  
             */
            #hero{
                backface-visibility: hidden;
                transition: transform 3s ease;
            }
            #hero_detail{
                backface-visibility: hidden;
                transform: rotateY(180deg);
                transition: transform 3s ease;
            }
            img{
                position: absolute;
                left: 0px;
                top:0px;
            }
            #container{
                position: relative;
            }
        </style>
        <script type="text/javascript">
            onload = function () {
                var container = document.getElementById("container");
                var hero = document.getElementById("hero");
                var hero_detail = document.getElementById("hero_detail");

                //鼠标点进去,翻转
                container.onmouseenter = function () {
                    // 把英雄翻转180，详情翻转180
                    hero.style.transform = "rotateY(180deg)";
                    hero_detail.style.transform = "rotateY(0deg)";
                }
                //鼠标移出来,返回
                container.onmouseleave = function () {
                    hero.style.transform = "rotateY(0deg)";
                    hero_detail.style.transform = "rotateY(180deg)";
                }

            }
        </script>
    </head>
    <body>

        <div id="container">
            <img src="img/hero.jpg" id="hero"/>
            <img src="img/heroDetail.png" id="hero_detail"/>
        </div>

    </body>
</html>