Question

我试图在html页面上设置菜单栏的动画。我采用的方法是将其拆分为两个单独的div，将div的原点转换为页面的中心，然后将div的x值缩放为0. html和css的代码如下：

    @charset "utf-8";
    /* CSS Document */
    
    body {
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-image: url(html-bg2.png);
    background-size: 0.5%;
    background-repeat: repeat;
    background-color: #111111;
    overflow: auto;
    }
    
    #headbar_left {
    position: fixed;
    left: 0px;
    margin: 0px;
    margin-top: 3vh;
    width: 51vw;
    height: 10vh;
    background-color: #161616;
    border-bottom: 1vh solid #8704ff;
    transition: all 0.65s ease-in-out;
    transform-origin: 0% -50%;
    }
    
    #headbar_right {
    position: fixed;
    right: 0px;
    margin: 0px;
    margin-top: 3vh;
    width: 51vw;
    height: 10vh;
    background-color: #161616;
    border-bottom: 1vh solid #8704ff;
    transition: all 0.65s ease-in-out;
    transform-origin: 0% 50%;
    }
    
    #circle_logo {
    position: fixed;
    z-index: 1;
    width: 17vh;
    height: 17vh;
    border-radius: 8.5vh;
    background-color: #161616;
    left: calc(50vw - 8.5vh);
    box-sizing: border-box;
    border: 1vh solid #8704ff;
    color: white;
    text-align: center;
    line-height: 17vh;
    font-size: 7em;
    font-family: "Lucida Console";
    transition: all 0.65s ease-in-out;
    }
    
    #logo {
    height: 100%;
    display: inline-block;
    vertical-align: center;
    transition: inherit;
    }
    
    .spin {
    transform: rotate(360deg);
    }
    
    .collapse {
    transform: scaleX(0);
    }
    
    #body_content {
    position: absolute;
    width: 86vw;
    height: 105vh;
    margin-right: 7vw;
    margin-left: 7vw;
    margin-top: 10vh;
    background-color: #161616;
    z-index: -1;
    box-shadow: 0px 3vh 10vh 4vh black;
    }

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="uh.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>uh</title>
    </head>
    <body>
    <div id="headbar_left"></div>
    <div id="headbar_right"></div>
    <div id="circle_logo"><img src="html-logo.png" id="logo"></div>
    <div id="body_content"></div>
    </body>
    <script>
    $(document).scroll(function()
    { 
       if($(window).scrollTop() !== 0) {
         $("#circle_logo").addClass('spin');
         $("#headbar_left").addClass('collapse');
         $("#headbar_right").addClass('collapse');
       }
       else {
         $("#circle_logo").removeClass('spin');
         $("#headbar_left").removeClass('collapse');
         $("#headbar_right").removeClass('collapse');
       } 
    });
    </script>
    </html>

问题在于，当构成菜单栏的div崩溃时，右边的一个像我想要的那样折叠到中心，但是左边的一个折叠到页面的左边。我将右边的原点翻译为50％，将左边的原点翻译为-50％，但似乎它们都被翻译了50％。知道如何解决这个问题吗？谢谢！

Answer 1

我认为你只需做一个简单的改变？

#headbar_left
{
    transform-origin: 100% -50%;
}

顺便说一句，如果您说某个值为0，则无需定义px或任何其他度量单位，因为无论您使用何种度量单位，它都只是0。

我“不是”超级优秀的脚本冠军，但我至少可以看到你可以通过将两个元素组合起来来减少你的jQuery片段，

$(document).scroll(function()
{ 
   if($(window).scrollTop() !== 0) {
     $("#circle_logo").addClass('spin');
     $("#headbar_left, #headbar_right").addClass('collapse');
   }
   else {
     $("#circle_logo").removeClass('spin');
     $("#headbar_left, #headbar_right").removeClass('collapse');
   } 
});

CSS变换原点移动起源的方式错误

1 个答案: