CSSの角度単位とは何ですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSの角度単位とは何ですか?

青灯夜游

Nov 20, 2020 pm 04:26 PM

css

CSS の角度単位は次のとおりです: 1. deg、度 (Degress)、円は合計 360 度; 2. grad、gradients (グラジアン)、円には合計 400 の勾配があります; 3 . rad、ラジアン (Radians) )、円は合計 2π ラジアン; 4.turn、turns (Turns)、円は合計 1 回転します。

CSSの角度単位とは何ですか?

css の角度単位

##1、deg

脱退。円の合計は 360 度です。

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-moz-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
-o-transform:rotate(2deg);
-ms-transform:rotate(2deg);
transform:rotate(2deg);
}
</style>
</head>
<body>
<div>transform:rotate(2deg);</div>
</body>
</html>

CSSの角度単位とは何ですか? 2、grad

グラディアン。円には合計 400 の勾配があります。

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-moz-transform:rotate(2grad);
-webkit-transform:rotate(2grad);
-o-transform:rotate(2grad);
-ms-transform:rotate(2grad);
transform:rotate(2grad);
}
</style>
</head>
<body>
<div>transform:rotate(2grad);</div>
</body>
</html>

3、rad CSSの角度単位とは何ですか?

ラジアン。円は合計 2π ラジアンです。90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-moz-transform:rotate(2rad);
-webkit-transform:rotate(2rad);
-o-transform:rotate(2rad);
-ms-transform:rotate(2rad);
transform:rotate(2rad);
}
</style>
</head>
<body>
<div>transform:rotate(2rad);</div>
</body>
</html>

4、turn

CSSの角度単位とは何ですか?

ターン、サークル (ターン)。円は合計 1 ターンです。

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-webkit-transform:rotate(.5turn);
-o-transform:rotate(.5turn);
-ms-transform:rotate(.5turn);
transform:rotate(.5turn);
}
</style>
</head>
<body>
<div>transform:rotate(.5turn);</div>
</body>
</html

プログラミング関連の知識の詳細については、次のサイトをご覧ください:

プログラミング教育

! ！ CSSの角度単位とは何ですか?

以上がCSSの角度単位とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

アクセス可能なWebサイトが構築が難しいのはなぜですか？Apr 15, 2025 am 10:45 AM

先日、私は多くの企業がアクセス可能なウェブサイトを作るのに苦労している理由について、フロントエンドの人々とおしゃべりをしていました。アクセス可能なWebサイトがとても難しいのはなぜですか

「隠された」属性は目に見えて弱いですApr 15, 2025 am 10:43 AM

あなたがそれがすべきだと思うことを正確に行うHTML属性があります：

数字によるJamstack＆＃039;の速度を見てくださいApr 15, 2025 am 10:39 AM

人々は、Jamstackサイトが速いと言います。実際のパフォーマンスメトリックを見て、その理由を調べましょう。最初のバイトの時間など、一般的なメトリックをカバーします

実用的なCSSカスタムプロパティの使用のパターンApr 15, 2025 am 10:34 AM

ブラウザのサポートは最終的に私たちが使用できる場所にあるので、私はCSSカスタムプロパティを使用して彼らのパワーを発見しています。

Jamstackツールと分類のスペクトルApr 15, 2025 am 10:31 AM

Jamstackの素晴らしい世界が大きくなっているため、それを支援するサービスとツールのすべてのカテゴリがこれまでになく重要です。静的サイトがあります

インターネットエクスプローラーをドロップするためのビジネスケースApr 15, 2025 am 10:30 AM

Internet Explorer（すなわち）11と他のすべての主要なブラウザ間の距離は、ますます隙間のある割れ目です。技術的に時代遅れのサポートを追加します

フォーカスリングのアニメーション位置Apr 15, 2025 am 10:27 AM

Maurice Mahanは、「フォーカスされた要素にオーバーレイを作成するためのライブラリ」であるFocosoverLayを作成しました。その説明はあなたが少し混乱しているのですが、ライブラリは必要ありません

コンテナクエリを忘れないでくださいApr 15, 2025 am 10:25 AM

コンテナクエリは、常にCSSに要求された改善のリストの一番上にあります。一般的な感情は、コンテナクエリがあった場合、私たちは＆＃039; tしないということです。

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、