自由选择翻转和缩放功能

Posted shoucong li

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自由选择翻转和缩放功能相关的知识,希望对你有一定的参考价值。

<!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

以上是关于自由选择翻转和缩放功能的主要内容,如果未能解决你的问题,请参考以下文章

(转)Java中Image的水平翻转缩放与自由旋转操作

一键缩放和翻转功能,鼠标经过翻转和缩放功能

一键缩放和翻转功能,鼠标经过翻转和缩放功能

uniapp微信小程序图片裁剪插件,支持自定义尺寸定点等比例缩放拖动图片翻转剪切圆形/圆角图片定制样式

为啥自定义缩放和翻转动画后视图会在任务栏下绘制?

在目标 c 中翻转缩放和旋转的 uiview