CSS 変換は、ドキュメント フローに影響を与えることなく、要素の位置、サイズ、方向を変更します。回転、拡大縮小、平行移動、傾斜を 1 つの変換プロパティに組み合わせることができ、CSS トランジションを使用してスムーズにアニメーション化します。
スライダーをドラッグすると、適用される各変換がリアルタイムで表示されます。破線の長方形は元の位置を示し、実線のカードは変換された結果を示します。満足したら、完全な変換値をコピーします。
Frequently Asked Questions
Q: 翻訳と位置の違いは何ですか?
翻訳と位置の違いは何ですか? Translate は、レイアウト フローを変更せずに要素を視覚的に移動します。位置 (上/左) はフローから要素を削除するか、兄弟を移動します。翻訳も GPU で高速化され、アニメーション化が高速化されます。
Q: 変換はレイアウトに影響しますか?
変換はレイアウトに影響しますか?いいえ。変換された要素はドキュメント フロー内で元のスペースを維持するため、重複やオーバーフローが発生するのが一般的です。スペースを確保するにはマージンまたはパディングを使用してください。
Q: 複数の変換を組み合わせることはできますか?
複数の変換を組み合わせることはできますか?はい、それらを 1 つのプロパティにスペースで区切ってリストします。これらは座標系で右から左に適用されます。
Q: 回転した要素がぼやけるのはなぜですか?
回転した要素がぼやけるのはなぜですか? 90 度以外の角度で回転すると、アンチエイリアシング アーチファクトが発生します。一部のブラウザでは、小さなスケール (1.001) を追加するか、will-change:transform を使用すると役に立ちます。
Q: トランスフォームはアニメーションでも機能しますか?
トランスフォームはアニメーションでも機能しますか?はい、transform はアニメーション化するのに最も安価なプロパティの 1 つです。 @keyframes またはトランジションと組み合わせると、GPU 合成によりモバイルでもスムーズになります。
日本の伝統色・和色
和色は平安時代の襲（かさね）の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。
山吹色 #F8B500山吹の花に由来する黄金色。JIS慣用色名
撫子色 #EEA9A9ナデシコの花の淡いピンク。平安時代から愛される
茜色 #B7282E茜草の根から染めた深い赤。夕焼けの色
若草色 #C3D825春の新芽を思わせる明るい黄緑
瑠璃色 #1E50A2仏教の七宝「瑠璃」に由来する深い青
桜色 #FEF4F4桜の花びらのようなごく淡いピンク
常磐色 #007B43常緑樹の深い緑。永遠を象徴する
Q: 和色とは何ですか？
和色とは何ですか？和色は平安時代の襲の色目に由来する日本の伝統色で、桜・山吹・瑠璃など自然の名を冠した色が多く、JIS慣用色名として269色が制定されています。
Q: 山吹色はどんな色ですか？
山吹色はどんな色ですか？山吹の花に由来する黄金色で、色値は #F8B500。JIS慣用色名の一つで、太田道灌の逸話でも知られる日本の代表色です。