前回の記事『CSSを使ってグラデーション枠の円を描く方法を教えます！ >>CSS を使用してグラデーションの境界線を持つ円を描画する方法を紹介します。興味のある友達は詳細を学ぶことができます~
この記事の焦点は、CSS を使用して回転を調整する方法を説明することです。半径。
CSS では、CSS カスタム プロパティ (変数) を使用して回転半径のサイズを調整できます。 Mozilla、Google、Opera、Apple、Microsoft の最新ブラウザにはカスタム属性があるので、試してみましょう ~
完全なコードに直接進みましょう:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box {
background-color: orange;
width: 200px;
height: 200px;
margin: 10px;
transition: transform 1s linear;
transform-origin: bottom left;
}
:root {
--radius: calc(10 * 4.5deg);
}
.box-rotate {
transform: rotate(var(--radius));
}
</style>
</head>
<body>
<h1 style="color: red;">
PHP中文网
</h1>
<button onclick="rotate()">点击我</button>
<div id="box"></div>
<script>
function rotate() {
var element = document.getElementById("box");
element.classList.toggle("box-rotate");
}
</script>
</body>
</html> 結果は次のとおりです:
上記のコード:
まず、「-radius」という名前のグローバル カスタム属性を定義します。
次に、calc() 関数を使用して「-radius」値 (45 度) を計算します。必要に応じて、他の定義済み変数を使用して半径を計算することもでき、これを使用してサイズを調整できます。回転半径。
最後に、var() 関数を使用してカスタム属性の値を挿入し、オブジェクトを回転します。
注:
calc() 関数は、長さの値を動的に計算するために使用されます。
- #例: width: calc(100% - 10px);## のように、演算子の前後にスペースを確保する必要があることに注意してください。 # calc() 関数を使用して任意の長さの値を計算できます;
- calc() 関数は、「」、「-」、「*」、「/」の演算をサポートします;
- calc() 関数は標準の数学演算の優先順位ルールを使用します;
関数は次の目的で使用されます。カスタム属性値を挿入します。このメソッドは、属性値が複数の場所で使用される場合に便利です。 (サポートされているバージョン: CSS3) PHP 中国語 Web サイト プラットフォームには、多くのビデオ教育リソースがあります。「
以上がCSS を使用して回転半径を動的に調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
cohost.orgの失われたCSSトリックApr 25, 2025 am 09:51 AMこの投稿では、Blackle Moriは、CohostのHTMLサポートの限界を押し広げようとしている間に見つかったハックのいくつかを示します。あえてこれらを使用してください、あなたもCSS犯罪者とラベル付けされないようにしてください。
カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AMCSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。
Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。
UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AMCSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。
微笑んでいますか？Apr 23, 2025 am 09:57 AMまあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです
「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AMイェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。
CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AMこのCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。
Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AMほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
WebStorm Mac版
便利なJavaScript開発ツール
ドリームウィーバー CS6
ビジュアル Web 開発ツール
ホットトピック
7722
15164214139652128925123329