帶絕對位置的css旋轉

我有一個固定的背景和一個絕對位置的div;我想把它放在top: 5px and left: 5px，它在工作，當我沒有文字的旋轉，但我想讓我的文字verticaly，所以我旋轉90°。我想從left: 5px and top 5px堅持下去，但是當我申請的旋轉，文字顯示的網頁上面，甚至左邊部分是放錯了地方..帶絕對位置的css旋轉

下面是一些CSS代碼（我用的魅力，但它應該工作一樣正常CSS）

const background = css({ 
    background: 'url(/static/profile.jpg) no-repeat left top fixed', 
    backgroundSize: 'auto 100%', 
    backgroundColor: '#040404', 
    position: 'fixed', 
    width: '100%', 
    height: '100vh', 
    top: '0', 
    left: '0', 
    zIndex: '0', 
}) 

const socialBloc = css({ 
    color: '#fff', 
    position: 'absolute', 
    top: '5px', 
    left: '5px', 
    zIndex: '999', 
    '-webkit-transform': 'rotate(270deg)', 
    '-moz-transform': 'rotate(270deg)', 
    '-ms-transform': 'rotate(270deg)', 
    '-o-transform': 'rotate(270deg)', 
    transform: 'rotate(270deg)', 
})

而且的Html：

<PageLayout pageName="Index"> 
    <div className={socialBloc}> 
    <Link prefetch href='*'><a className={a} target="_blank">Link</a</Link> 
    <Link prefetch href='*'><a className={a} target="_blank">Link</a</Link> 
    </div> 
    <div className={background}> 
    </div> 
</PageLayout>

它與水平（不旋轉偉大的工作），但是當我申請的旋轉我的文字是在..

感謝您的幫助

來源

2017-03-02 guillaumek

後所呈現的HTML和CSS請讓我們有一個[mcve] –

我已經讓你的socialBloc成了一個內聯塊，因此它的長度是有限的。

接下來，我把它翻譯到左側，使最右邊的角落裏左邊一個是，和周圍的左上角中心旋轉它：

.socialBloc { 
 
    display: inline-block; 
 
    font-size: 36px; 
 
    background-color: yellow; 
 
    transform-origin: left top; 
 
    transform: rotate(270deg) translateX(-100%); 
 
}

<div class="socialBloc"> 
 
    <a href="#link">Link</a> 
 
    <a href="#link">Link</a> 
 
</div>

來源

2017-03-02 18:04:26 vals

這是完美的工作，我認爲這是因爲我沒有添加translateX，我嘗試轉換起源，但沒有先工作;）非常感謝你！:) – guillaumek

快樂，它幫助！ – vals

沒有視覺例如通過我去只能猜測你的問題，但也許using transform-origin would help。這將允許您定義transform的中心以外的元素上的點生效。

來源

2017-03-02 17:15:14 Gwellin

而不是

transform: rotate(270deg);

你可以使用：

writing-mode: vertical-rl;

後者明確地用於處理文本的顯示。

工作實例：

.socialBloc { 
 
font-size: 36px; 
 
writing-mode: vertical-rl; 
 
}

<div class="socialBloc"> 
 
<a href="#link">Link</a> 
 
<a href="#link">Link</a> 
 
</div>

來源

2017-03-02 17:15:36 Rounin

這似乎是這樣比我好多了！會記得。 – PapaSoft

您還沒有關閉<a>標記，如果問題不是吧，好像你需要transform-origin工作。

這裏是工作提琴對大家有點幫助： https://jsfiddle.net/huLxsv0f/3/

我知道這不是完美的解決方案。但我不確定你會找到更好的...

來源

2017-03-02 17:20:26 PapaSoft

帶絕對位置的css旋轉

回答

相關問題