CSS transform-originプロパティを理解する

CSS transform-originプロパティを理解する

序文

最近、花火アニメーションを作成しました。花火が散るアニメーションです。アニメーションの実装中、花火の回転で主に行き詰まりました。後でわかったのですが、それは主にtransform-originプロパティを十分に理解していなかったためでした。特別に練習するための例を見つけて、プロパティの理解を深めました。

transform-origin効果

このプロパティは、要素の変形の原点を変更するために使用され、回転と組み合わせて使用​​されることが最も一般的です。受信されるパラメータの数は 1、2、または 3 です。 2 つの値の場合、 transform-origin: 50px 50px;のようにボックスモデルの左側からの値を表します。これは、コンテナの回転中心がボックスモデルの左上隅を原点とし、X 軸と Y 軸が原点から 50px の距離で回転することを意味します。

時計の時針の絵

中央の縦棒は初期設定で、それに基づいて次の縦棒が回転します。

  <div class="時計">
    <div class="時間"></div>
    <div class="時間"></div>
    <div class="時間"></div>
    <div class="時間"></div>
    <div class="時間"></div>
  </div>

以下の CSS コードからわかるように、回転の原点として最初の垂直線の (3,105) ピクセルに回転中心を設定します。ここでの距離は、ボックス モデルの左側からの値です。これを理解すると、他の時針を記述し、それらを個別に回転させて時針を取得できます。ここでの計算値の相対的な位置を理解していなかったため、多くの落とし穴に陥ってしまいました。

CS

。時間 {
  位置: 絶対;
  左: 105px;
  幅: 6px;
  高さ: 50px;
  背景色: #000;
  境界線の半径:6px;
  -webkit-transform-origin:3px 105px; 
          変換の原点:3px 105px;
}
.hour:n番目の子(2) {
  変換:回転(45度);
}
.hour:n番目の子(3) {
  変換:回転(90度);
}
.hour:n番目の子(4) {
  変換:回転(-45度);
}
.hour:n番目の子(5) {
  変換:回転(-90度);
}

参照する

翻訳

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  Vueはvueメタ情報を使用して各ページのタイトルとメタ情報を設定します。

>>:  MySQL で自動インクリメントシーケンスを実装するためのサンプルコード

推薦する

ハイパーコネクションの4つの状態の適用の詳細な説明

ブラウザの問題かもしれないと思うかもしれませんが、スタイル定義の順序が間違っている可能性が高いです。...

JS の効率的なマジック演算子の概要

JavaScript は現在、毎年新しいバージョンがリリースされており、より便利で効率的な新しい演算...

浮遊要素によって引き起こされる問題と解決策の詳細な説明

1. 問題複数のフローティング要素は親要素の幅を拡張できず、親要素の高さが 0 になる可能性がありま...

MySQLの読み書き分離により挿入後にデータが選択されなくなる問題を解決

MySQLは独立した書き込み分離を設定します。コードに次のものを書くと問題が発生する可能性があります...

高性能ウェブサイトの最適化ガイド

パフォーマンスの黄金律:エンドユーザーの応答時間のわずか 10% ~ 20% が HTML ドキュメ...

js Promise同時制御メソッド

目次質問背景アイデアと実装質問次のように、同時実行 Promise の数を制御するメソッドを記述する...

Linux自動ログイン例の説明

インターネット上には、expect を使用して自動ログインを実現するスクリプトが多数存在しますが、明...

HTMLセマンティクスと関連するフロントエンドフレームワークの詳細な分析

セマンティクスについて意味論は、記号やシンボルとそれらが表す意味との関係を研究する学問です。言語学で...

Navicat PremiumでSQLファイルをインポートする方法

今日、最終プロジェクトに取り組み始めましたが、今年はMySQLデータベースを使用したため、Navic...

Linux でスレッドを作成するための pthread_create の具体的な使用法

pthread_create関数機能紹介pthread_createはUNIX環境のスレッド作成関数...

HTML 選択タグにリンクを追加する 3 つの方法

最初のもの:コードをコピーコードは次のとおりです。 <html> <ヘッド>...

JavaScript で配列の変更を監視する方法

序文以前、defineProperty を紹介したとき、オブジェクトの変更のみを監視でき、配列の変更...

Web デザイン体験: 5 つの優れた Web デザイン コンセプトの完全分析 (画像)

他の種類のデザインとは異なり、Web デザインは時代の発展とともに常に変化しています。したがって、W...

マークアップ言語 - タイトル

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...