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

我正在使用position属性来定位一个触发左侧菜单的按钮，我也希望它位于y轴上的页面中心，问题在于元素旋转了-90deg并且在那里现在是左侧的空白。我不想把它定位脏左：-24px;或者其他的东西。是否有人知道为什么会有空白，如果是，我怎样才能防止这种情况发生并解决我的问题？垂直对齐旋转的固定元件？

这里是我的代码，您也可以在我做了一个codepen：

<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，我觉得它更容易在环境中理解。

来源

2017-07-04 LUEH

如果您不提供编译的CSS，那么大多数不使用SCSS的人将无法为您提供帮助。 – Rob

好吧，对不起，认为大多数人都理解今天的SASS或SCSS。我将更改代码片段。 – LUEH

我已经调整了我的答案，以更好地解释这里发生的事情 - 看看，让我知道如果有帮助？ – Frits

解决问题的最简单方法是调整菜单按钮的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。

旋转元素后，即使您的“新宽度”是您的菜单按钮的高度（在本例中为100px，中心距为50px），中心距屏幕仍为75px，你的元素和屏幕边之间有25px的空间。

来源

2017-07-04 13:24:01 Frits

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

回答

相关问题