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 で自動インクリメントシーケンスを実装するためのサンプルコード

推薦する

LINUX での IPTABLES ファイアウォールの基本的な使用方法のチュートリアル

序文パブリック IP を持つ本番 VPS の場合、必要なポートのみが開かれ、IP とポートを制御する...

DockerはRedisをインストールし、操作用のビジュアルクライアントを導入します

1 はじめにRedis 、 ANSI C言語で開発されたKey-Valueベースの高性能NoSQLデ...

LeetCode の SQL 実装 (183. 注文をしたことがない顧客)

[LeetCode] 183.注文しない顧客Web サイトに、Customers テーブルと Or...

TypeScriptのインストールと使用方法と基本的なデータ型

最初のステップはTypeScriptをグローバルにインストールすることですnpmを使用してインストー...

Centos7のFirewalldファイアウォールの基本コマンドの詳細な説明

1. Linuxファイアウォールの基礎Linux ファイアウォール システムは主にネットワーク層で動...

nginx で gzip 圧縮を実装してウェブサイトの速度を向上させる方法

目次gzip 圧縮を使用する理由は何ですか? nginxはgzipを実装するgzip処理nginx ...

VUEはG2チャートを使用した実装を導入します

目次G2チャートについて使用テンプレートで使用される完全なコード (棒グラフ)世界地図を追加するG2...

ページ内のリストプルダウン効果を実現するための純粋なCSS

次のような効果がよく見られます。 そうです、ページ上でよく使われる「展開と折りたたみ」のインタラクシ...

SpringBoot を MySQL に接続してデータを取得し、バックエンド インターフェースに書き込む方法

目次1. 新しいプロジェクトを作成する2. 依存関係を追加する3. SpringコンテナにDrive...

MySQL で指定した桁数の乱数を生成する方法と、バッチで乱数を生成する方法

1. まず、よく使われるMySQL関数をいくつか紹介しますRAND() は 0 から 1 (0<...

Docker JVM メモリ使用量の表示

1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...

MySQLがクエリキャッシュをキャンセルした理由

MySQL には以前、クエリ キャッシュ (Query Cache) がありました。8.0 以降では...

Linux CDの意味と使い方

Linux CD とはどういう意味ですか? Linux では、cd はディレクトリの変更を意味します...

Vueでのバスの使用に関する詳細な説明

Vue バス メカニズム (バス) vuex を使用するだけでなく、vue 内の親子以外のコンポーネ...

Linuxで同一ファイルを見つける方法

コンピュータを使用すると、システム内に大量のゴミが生成されます。最も一般的なケースは、同じファイルが...