自由选择翻转和缩放功能

最新推荐文章于 2023-02-22 14:11:34 发布

wx:sddzlsc

最新推荐文章于 2023-02-22 14:11:34 发布

阅读量89

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/sddzlsc/article/details/117043727

版权

前端专栏收录该内容

17 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="fanzhuan.css" id="mycss" type="text/css" />   
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script src="jquery-3.6.0.js"></script>
    <style>
        /* *{box-sizing: border-box;}
        html,body{margin:0;padding:0;height:100%}
        ul,ol{margin:0;padding:0;list-style: none;}
       .wrapper{
           width:800px;
           margin:0 auto
       }
       ul.words{display: flex;flex-wrap: wrap;}
       ul.words li{width:25%;border:1px solid #f00;height:100px;position: relative;color:#fff}
       .cn{position: absolute;width:100%;height:100%;background-color: #00f;transition:0.3s;}
       .en{position: absolute;width:100%;height:100%;background-color: #00f;transition:0.3s;}
ul li{transition: 1s;transform:rotateY(0deg);}
.cn,.en{transform: perspective(800px);} */
/* .hide{
    transform:rotateY(-180deg);opacity: 0;}
  */
    </style>
    <script>
        function test(){
            var mcss=document.getElementById('mycss');
            mcss.href="fanzhuan.css"
        }
    </script>
</head>

<body>
    <div class="btns">
        <button id="btncn">全部变化</button>
    <input type="button" value="改成缩放" onclick="javascript:document.getElementById('mycss').href='suofang.css'" />
    <input type="button" value="改回翻转" onclick="test(this)"/>   
    </div>
    <div class="wrapper">
        <ul class="words">
            <li>
                <div class="cn">中国</div>
                <div class="en hide">chinaz</div>
            </li>
            <li>
                <div class="cn">英国</div>
                <div class="en hide">english</div>
            </li>

            <li>
                <div class="cn">中国</div>
                <div class="en hide">chinaz</div>
            </li>
            <li>
                <div class="cn">英国</div>
                <div class="en hide">english</div>
            </li>
            <li>
                <div class="cn">中国</div>
                <div class="en hide">chinaz</div>
            </li>
            <li>
                <div class="cn">英国</div>
                <div class="en hide">english</div>
            </li>
            <li>
                <div class="cn">中国</div>
                <div class="en hide">chinaz</div>
            </li>
            <li>
                <div class="cn">英国</div>
                <div class="en hide">english</div>
            </li>


        </ul>
    </div>
</body>
<script>

    $("#btncn").on("click",function(){
      $(".cn").toggleClass("hide").next().toggleClass("hide")
    })
    $("ul li")
    .on("mouseenter",function(){
        $(this).find(".cn").toggleClass("hide").next().toggleClass("hide")
    })
    .on("mouseleave",function(){
        $(this).find(".cn").toggleClass("hide").next().toggleClass("hide")
    })
</script>
</html>

index.html

*{box-sizing: border-box;}
html,body{margin:0;padding:0;height:100%}
ul,ol{margin:0;padding:0;list-style: none;}
.wrapper{
   width:800px;
   margin:0 auto
}
ul.words{display: flex;flex-wrap: wrap;}
ul.words li{width:25%;border:1px solid #f00;height:100px;position: relative;color:#fff}
.cn{position: absolute;width:100%;height:100%;background-color: #00f;transition:0.3s;backface-visibility: hidden;}
.en{position: absolute;width:100%;height:100%;background-color: #00f;transition:0.3s;backface-visibility: hidden;}
/* ul li{transition: 1s;transform:rotateY(0deg);} */

.hide{transform: scale(0);}

suofang.css

*{box-sizing: border-box;}
        html,body{margin:0;padding:0;height:100%}
        ul,ol{margin:0;padding:0;list-style: none;}
       .wrapper{
           width:800px;
           margin:0 auto
       }
       ul.words{display: flex;flex-wrap: wrap;}
       ul.words li{width:25%;border:1px solid #f00;height:100px;position: relative;color:#fff}
       .cn{position: absolute;width:100%;height:100%;background-color: #00f;transition:0.3s;}
       .en{position: absolute;width:100%;height:100%;background-color: #00f;transition:0.3s;}
ul li{transition: 1s;transform:rotateY(0deg);}
.cn,.en{transform: perspective(800px);}
.hide{
    transform:rotateY(-180deg);opacity: 0;}

fanzhuan.css