在固定Div内旋转文本 [英] Rotating Text Within A Fixed 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屋！