在固定Div内旋转文本 [英] Rotating Text Within A Fixed Div
本文介绍了在固定Div内旋转文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在页面左侧设置一个固定的div,从左侧开始设置24像素,并从页面顶部到底部延伸。在这个div内将是导航和标题。我正在尝试将标题旋转-90度,并居中放置在div的底部。
I'm trying to set up a fixed div to the left of a page, 24px from the left and stretching from top to bottom of the page. Inside this div will be navigation and a title. I'm trying to get the title rotated -90 degrees and centered positioned toward the bottom of the div.
现在很难解决这个问题。环顾了很多地方,没有看到类似的例子。我已经用当前代码设置了一个小提琴: https://jsfiddle.net/xkLc9xuy/2/
Having a tough time figuring this out. Looked around a lot of places and not seeing a similar example. I've set up a fiddle with the current code: https://jsfiddle.net/xkLc9xuy/2/
HTML:
<div>
<article></article>
<footer></footer>
<header></header>
<nav data-secondary></nav>
<nav data-primary>
<div>Website Title</div>
</nav>
</div>
SCSS:
@mixin -position($position:relative, $top:0, $right:0, $bottom:0, $left:0) {
position: $position;
@if $position !=relative {
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
}
@mixin -transform($transform) {
-ms-transform: $transform;
-webkit-transform: $transform;
transform: $transform;
}
@mixin -transform-origin($origin) {
-ms-transform-origin: $origin;
-webkit-transform-origin: $origin;
transform-origin: $origin;
}
body{
*:not(script){
margin:0;
padding:0;
@include -position;
}
> div{
@include -position(absolute);
}
}
nav[data-primary]{
box-shadow:0 0 8px rgba(0,0,0,0.5);
width:40px;
@include -position(absolute, 0, auto, 0, 24px);
> div{
white-space:nowrap;
height:40px;
line-height:40px;
background-color:red;
@include -transform(rotate(-90deg));
@include -transform-origin(left bottom);
}
}
推荐答案
您也可以看看写作模式:
-webkit-writing-mode: vertical-lr;
/* old Win safari */
writing-mode: vertical-rl;/*FF*/
writing-mode: tb-lr;
/* writing-mode:sideways-lr;
or eventually scale(-1,-1) untill sideways-lr is working everywhere */
transform: scale(-1, -1);
https://jsfiddle.net/xkLc9xuy/20/
这篇关于在固定Div内旋转文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文