我在使用 css 变换将块旋转 90 度时遇到了一个小问题。
挑战在于:
旋转块位于 40px 垂直列内。这意味着自动模式下旋转块的宽度不超过40px。因此,文本块不会放置在连续的一行上,而是出现换行符。
为了更好地形象化这个问题,请检查我创建的这个小提琴:http://jsfiddle.net/F7CEX/ 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
}
我只是需要这篇文字作为一篇文章。有任何想法吗?
如果这就是你想要的
fiddle http://jsfiddle.net/Db68B/
这里的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;
}
检查并告知我是否遗漏了某些内容
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)