配置の問題を発生させずに CSS でテキストを回転するにはどうすればよいですか?

配置の問題を発生させずに CSS でテキストを回転する方法

提供された画像に示すようにテキストを回転するには、CSS 変換を利用できます。 。ただし、これを行うと、位置ずれや位置決めの問題が発生することがよくあります。この問題は、回転がフロー内の要素の位置に影響を与えるために発生します。

提供された HTML では、複数のタイトルとコンテンツ セクションがコンテナー内にネストされています。タイトルを回転するには、transform:rotate(-90deg) プロパティが適用されます。ただし、コンテンツがタイトルの後に水平方向に流れると想定されているため、この回転によりコンテンツの配置が乱れます。

配置の問題の原因

1. 水平方向のフロー: コンテンツは左にフロートするように設定されており、回転されたタイトルの後に水平方向にフローします。回転により垂直方向のギャップが生じ、意図した配置が崩れます。
2. 無視される幅: タイトルが回転されると、その幅は無視されます。その結果、タイトルがまだ幅のスペースを占めていると仮定して、コンテンツは水平方向に流れ続けます。

解決策: 配置の維持

適切な配置を維持するには、次の戦略を使用できます:

1.垂直フロー:

• display: block を追加してタイトルをブロック要素に変換します。
• 書き込みモード:vertical-rl を適用して、書き込みモードを垂直に変更します。
• transform: 回転(-90deg) またはtransform: を使用して、位置に影響を与えずにタイトルを回転します。回転Z(-90度).
• コンテンツの書き込みモードをwriting-mode:horizo​​ntal-tbに設定します。

例:

<code class="css">.title {
  display: block;
  writing-mode: vertical-rl;
  transform: rotateZ(-90deg) /* or transform: rotate(-90deg) */;
}

.content {
  writing-mode: horizontal-tb;
}</code>

2.絶対位置:

• position:Absolute を追加してタイトルを絶対要素に変換します。
• transform:rotate(-90deg) を使用してタイトルを回転します。
• 上部と下部のプロパティを設定して、タイトルを垂直方向に配置します。
• コンテンツを

例:

<code class="css">.title {
  position: absolute;
  transform: rotate(-90deg);
  top: 0;
  bottom: 0;
}

.content {
  margin-left: 50px /* adjust the margin to align with the rotated title */;
}</code>

これらのメソッドを使用すると、配置と位置を維持しながら CSS 内のテキストを回転できます。隣接する要素。

以上が配置の問題を発生させずに CSS でテキストを回転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。