2017-03-02 25 views
2

私は固定された背景と絶対位置を持つdivを持っています。 top: 5px and left: 5pxに配置したいのですが、テキストを回転させていないときに機能しますが、テキストを垂直にしたいので、回転を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> 

私は回転を適用すると私のテキストは...オーバー

だけあなたの問題を推測することができますIで行くための視覚的な例がなければ助け

+0

ポストレンダリングされたHTMLとCSSは私たちが[mcve]を持っているようにしてください –

答えて

3

私はあなたのsocialBlocを長さが制限されるようにインラインブロックにしました。

次に、私は左の1があった場所右端のコーナーも作り、左上の中心の周りにそれを回転させるために左にそれを翻訳:

.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>

+0

それは完全にうまくいっています。私はtranslateXを追加していないので、私は変換元を試しましたが、最初は動作しませんでした)だと思います。:) – guillaumek

+0

それが助けてくれてうれしい! – vals

0

のおかげで、おそらくusing transform-origin would helpです。これにより、transformが有効になるように、中心以外の要素上の点を定義することができます。代わりに使用することができます

transform: rotate(270deg); 

2

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>

+1

これは私の方がはるかに良いです!覚えています。 – PapaSoft

0

あなたの<a>タグを閉じて、問題はそれではない場合、あなたがtransform-originで作業する必要があるように、思いませんでした。 https://jsfiddle.net/huLxsv0f/3/

私はそれが完璧な解決策ではないことを知っている:ここでは

はビットを助けるために働いフィドルです。しかし、私はあなたがより良いものを見つけることがわかりません...