相关疑难解决方法(0)

我担心我不知道如何解释它以及我可以展示它.所以我设置了这个小提琴.

如您所见,导航菜单不在应有的位置.它应该精确地设置在头元素的底部边框和左边框.即bottom: 0和left: 0.但是,我设置了-90degs的旋转,显然nav元素上的绝对定位是在旋转之前发生的,或者更确切地说是在原始元素上发生,就好像旋转不存在一样.

我已经尝试使用:before和:after伪元素来尝试,看看我是否可以这样解决它.但我无法完全掌握这些伪元素.在这两种情况下,都绕过了旋转.(没有旋转,nav元素显然将自己定位在它应该的位置.)

这基本上是代码:

<div id="head">
    <div id="title">My Web</div>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Something Else</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

没有什么花哨.

这就是CSS(它对这个问题很重要):

#head {
    position: relative;
}
nav {
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform: rotate(-90deg);
}
nav a {
    display: inline-block;
    padding: 0 9px;
}

它是如何工作的:你可以在Fiddle项目中看到这一点. …

我试图在div使用 onload窗口事件中转换文本.

我知道这transform: rotate(360deg) scaleX(-1);会使整个单词旋转,但我需要旋转文本字符并在加载时将它们返回到相同的位置.

我的小提琴,并在mysite初始化它

将答案标记为正确.仍然需要更好的答案!

我在摆弄旋转属性并意识到元素会根据其文本长度移动到不同的位置。

这是旋转部分的代码：

transform: rotate(-90deg) translate(0, -100%);
transform-origin: 0 0;
position: absolute;
bottom: 6rem;
right: -4rem;

transform: rotate(-90deg) translate(0, -100%);
transform-origin: 0 0;
position: absolute;
bottom: 6rem;
right: -4rem;

.stripBox {
  min-height: 100px;
  background-size: cover;
  background-position: center center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.stripBox__smallNum {
  padding-left: 2rem;
}

.stripBox__heading {
  padding-right: 1rem;
  color: white;
  font-size: 1.2rem;
}

.stripBox--right {
  flex-direction: row-reverse;
}

.stripBox--right .stripBox__smallNum {
  padding-right: 1rem;
}

.stripBox--right .stripBox__heading {
  padding-left: 2rem;
}

.stripBox:nth-child(1) …