回転したdivのテキストの内側にdivを配置します

divを回転しようとしていますが、bodyの幅をすべてカバーするようにしたいと思います。そこで、幅を120％に設定しようとしました（明らかに100％では不十分でした）。しかし、その "解決策"の問題は、私がdivを正しく内部に集中させることができないということです。私はそれをどのように解決すべきですか？回転したdivのテキストの内側にdivを配置します

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-color: yellow; 
 
    overflow-x: hidden; 
 
} 
 
.rotation { 
 
    position: relative; 
 
    display: table; 
 
    width: 120%; 
 
    height: 500px; 
 
    transform: rotate(-5deg); 
 
    background-color: green; 
 
    margin-left: -50px; 
 
} 
 
.wrapper { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    transform: rotate(5deg); 
 
}

<h1>Some title</h1> 
 

 
<div class="rotation"> 
 
    <div class="wrapper"> 
 
    <h1>Heading</h1> 
 

 
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quaerat, dolore quod cum ea rerum asperiores cupiditate esse harum. Voluptatibus soluta fuga, beatae quod dolorem, veniam sint ab non laboriosam.</span> 
 
    </div> 
 
</div>

JSFIDDLE

出典

2016-08-22 TheGuy

どのように表示したいのかの参考画像がありますか？たとえば、「センター[...]正しく」とはどういう意味ですか？ – Hans

は、私はあなたが全体の要素を回転させた後、再び回転している理由を求めることができます：ここで

は、私が使用しようとしたコードですテキスト要素は内部にありますか？

代わりに、私は擬似（::beforeまたは::after）要素を使用することをお勧めし、それはあなたの背景をより細かく制御できますし、あなたが二度テキストを回転していないことを意味します。ここで

はあなたのための一例でJSFiddleです：https://jsfiddle.net/8nkz1278/1/

出典

2016-08-22 22:52:03

私はこれについても考えなかった。どうもありがとうございました！ – TheGuy

は@Andi北朝鮮の提案を修正します。ラッパーが常にビューポートの高さを取得したい場合は、2つのソリューションまたはjsまたはcss3があります。私はcss3を提案する。

vw/vhでは、ビューポートのサイズに相対的な要素のサイズを設定できます。 vw/vh単位は、1単位がビューポートの幅の1/100を反映するという点で興味深いものです。要素をビューポートの全幅にするには、幅：100vwに設定します。

あなたの場合、ラッパー要素 'height：95vh;'を追加するだけです。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    background-color: yellow; 
 
    overflow-x: hidden; 
 
} 
 

 
.rotation { 
 
    position: relative; 
 
    display: table; 
 
    height: 500px; 
 
} 
 

 
.rotation::after { 
 
    top: 0; 
 
    left: -10%; 
 
    content: ''; 
 
    position: absolute; /* Bring below content */ 
 
    background: lightblue; 
 
    z-index: 1; /* Bring below content */ 
 
    transform: rotate(-5deg); 
 
    width: 120%; 
 
    height: 100%; 
 
} 
 

 
.wrapper { 
 
    position: relative;/* Bring above background shape */ 
 
    z-index: 2; /* Bring above background shape */ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    height:95vh; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
</head> 
 
<body> 
 
\t <h1>Some title</h1> 
 
\t 
 
\t <div class="rotation"> 
 
\t \t <div class="wrapper"> 
 
\t \t \t <h1>Heading</h1> 
 

 
\t \t \t <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quaerat, dolore quod cum ea rerum asperiores cupiditate esse harum. Voluptatibus soluta fuga, beatae quod dolorem, veniam sint ab non laboriosam.</span> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html>

乾杯！

出典

2016-08-22 23:05:20

回転したdivのテキストの内側にdivを配置します

答えて

関連する問題