css - 在 css 中旋转 Div 时留出空间

Question

我想在我的页面中有一个 div，它的位置将固定旋转 30 度，但是当我这样做时它显示如下

我不希望旋转时顶部出现空白区域。当我旋转我的 div 时，我希望 Top 与当前在顶部的底部相同，它会显示一些空间。

CSS 是

#beta{
    position:fixed;
    bottom:0;
    padding:-30px;
    z-index: 1;
    width: 15em;
    height:3em;
    background: #65a9d7;
   -ms-transform: rotate(30deg); /* IE 9 */
   -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
   transform: rotate(30deg);  
}

Answer 1

您可以添加transform-orign，它将充当旋转轴。如果您希望它位于顶部，则添加 top 并删除 bottom 值，在旋转时， block 会移动，因此将 left 值赋予其适当值高度的一半。

#beta{
    position:fixed;
    top:0;
    z-index: 1;
    width: 15em;
    height:3em;
    left: 1.5em;
    background: #65a9d7;
   -ms-transform: rotate(30deg); /* IE 9 */
   -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
   transform: rotate(30deg);  
   transform-origin: left top;
}

还有一件事，填充不适用于负值。 :)

祝你代码日愉快。