CSS で回転した要素を左端に揃えるにはどうすればよいですか?

要素の配置と回転

CSS では、特定の点を中心に要素を回転できます。ただし、回転後に要素を正確に位置決めすることが困難な場合があります。ここで transform-origin プロパティが登場します。

問題:

ユーザーが

を回転させたいと考えています。テキストを含む要素を選択し、左上隅に配置します。なんとか上部に配置できましたが、左端に揃えるのは困難でした。

解決策:

回転した要素を左端に揃えるには、次のようにします。 transform-origin プロパティを 左上 に設定する必要があります。これにより、回転および平行移動操作の基準点が設定されます。さらに、translateX の値を -100% に変更すると、要素の原点が左端に移動し、効果的に左端に揃えられます。

例:

body {
  margin: 0;
}

.credit {
  transform-origin: top left;
  position: absolute;
  background-color: pink;
  transform: rotate(-90deg) translateX(-100%);
}

<div class="credit">
  Picture by Name
</div>

これらの変更により、回転された

要素は左上隅に正確に配置されます。

以上がCSS で回転した要素を左端に揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

KB5055612を修正する方法Windows 10にインストールできませんか？

4週間前 By DDD

<🎜>：庭を育てる - 完全な突然変異ガイド

3週間前 By DDD

<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

Nordhold：Fusion System、説明

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Java チュートリアル

1668

14

CakePHP チュートリアル

1427

52

Laravel チュートリアル

1329

25

PHP チュートリアル

1273

29

C# チュートリアル

1256

24

もっと見る