Question

我使用position属性来定位触发左侧菜单的按钮，我也希望它在y轴的页面中心，问题是元素是旋转的 - 90度，现在左边有一个空格。我不想把它弄脏了：-24px;或者其他的东西。有人知道为什么有空格，如果有，我怎么能防止这种情况发生并解决我的问题呢？

这是我的代码，您也可以在我已经制作的代码中找到：

<div class="content-wrapper bg--secondary">
    <div class="menu__button">
        <span class="menu__button__link">
            menu
        </span>
    </div>  
</div>


// CSS starts here

.content-wrapper{
    width: 100%;
    height: 100vh;
}

.menu__button{
    width: 150px;
    height: 100px;
    background-color: #000;
    color: #fff;
    position: fixed;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%) rotate(-90deg);
}

.bg--primary{
    background-color: #2d2d2d;
}

点击here访问codepen，我认为在环境中更容易理解。

Answer 1

解决问题的最简单方法是调整菜单按钮的transform-origin。

.menu-button {
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: 100px 25px; //the height of the element and the height - the center position (explanation below);
}

我已在codepen as an example内调整了它。

作为对菜单发生这种情况的进一步解释，transform-origin总是center center所以如果您的元素宽度为150px，那么它的中心距离左侧是75px屏幕。

旋转元素后，即使你的＆＃34;新宽度＆＃34;中心距离屏幕仍然是75px。是菜单按钮的高度，在这种情况下为100px，中心为50px，在您的元素和屏幕侧面之间留出25px的空间。

垂直对齐旋转的固定元件？

1 个答案: