旋转（变换：旋转）块时的css挑战 - 宽度自动答案

【问题标题】：css challenge when rotating (transform:rotate) block - width auto旋转（变换：旋转）块时的css挑战 - 宽度自动
【发布时间】：2013-09-23 17:45:05
【问题描述】：

我对使用 css 变换旋转 90 度的块有一点问题。

挑战在于：

旋转块位于 40px 垂直列内。这意味着在自动模式下旋转块的宽度不超过 40px。因此，文本块不会放在一个连续的行上，而是出现换行符。

为了更好地可视化这个问题，请查看我创建的这个小提琴：http://jsfiddle.net/F7CEX/

#open_nav {
    font-family: 'Exo', sans-serif;
    font-weight: 300;
    font-size: 1em;
    display: block;
    color: #333333;
    text-decoration: none;
    background: url("img/menu-s.png") no-repeat 18px -30px transparent;
    padding-left: 50px;
    padding-right: 19px;
    line-height: 40px;
    position: absolute;
    bottom: 18px;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: 20px;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: 20px;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: 20px;
    -o-transform: rotate(-90deg);
    -o-transform-origin: 20px;
    transform: rotate(-90deg);
    transform-origin
}

我只需要这个文本是单行的。有什么想法吗？

【问题讨论】：

标签： html css rotation

【解决方案1】：

如果这是你想要的

fiddle

这里的 css 只添加了空格。它是连续的。如果我遗漏了一些点，那么请清除

这是css

#sidebar-small {
width: 40px;
height: 100%;
position: fixed;
left: 0;
top: 0;
}

#open_nav {
white-space:nowrap;
font-family: 'Exo', sans-serif;
font-weight: 300;
font-size: 1em;
display: block;
color: #333333;
text-decoration: none;
background: url("img/menu-s.png") no-repeat 18px -30px transparent;
padding-left: 50px;
padding-right: 19px;
line-height: 40px;
position: absolute;
bottom: 18px;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 20px;
-moz-transform: rotate(-90deg);
-moz-transform-origin: 20px;
-ms-transform: rotate(-90deg);
-ms-transform-origin: 20px;
-o-transform: rotate(-90deg);
-o-transform-origin: 20px;
transform: rotate(-90deg);
transform-origin: 20px;
}

如果我遗漏了什么，请检查并告诉我

【讨论】：

非常感谢。乐于助人:)
这么多年过去了，这正是我所需要的。非常干净的解决方案，可能是最干净的。你的white-space:nowrap强制内容为一行，bottom: ...px帮我调整起点，最后transform-origin帮我调整从哪里开始转换。

【解决方案2】：

只需从 CSS 中删除 Position 属性：-

#sidebar-small {
width: 40px;
height: 100%;
left: 0;
top: 0;
}

【讨论】：

在这种情况下，您需要为 open_nav 容器再次指定 Width；
是的，但这意味着按钮内不再有可变宽度的内容！所以我的问题没有解决方案？

【解决方案3】：

我认为我们可以通过使用以下样式来解决问题

#sidebar-small {
height: 250px;
left: 0;
position: fixed;
top: 0;
width: 250px;
}

在上述样式中，如果我们希望标题占据整个屏幕，我们也可以将宽度设置为 100%。

#open-nav{
bottom: 8px;
left: 10px;
position: absolute;
color: #333333;
font-family: 'Exo',sans-serif;
font-size: 1em;
line-height: 40px;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 20px;
-moz-transform: rotate(-90deg);
-moz-transform-origin: 20px;
-ms-transform: rotate(-90deg);
-ms-transform-origin: 20px;
-o-transform: rotate(-90deg);
-o-transform-origin: 20px;
transform: rotate(-90deg);
transform-origin: 20px;
}

以上样式为锚标记。

【讨论】：

将侧边栏宽度作为给定值。通过改变设计的解决方案并不是真正的解决方案。此外，我在我的操作中提到了这个解决方案，通过解释宽度是问题。