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 を応援していただければ幸いです。