CSSのtransform-originプロパティは何をするのでしょうか?変換元属性の役割

この記事では、CSS でのtransform-origin 属性の役割を紹介します。変換元属性の役割には一定の参考値がありますので、お役に立てれば幸いです

実装中に花火が広がるアニメーションです。アニメーションの処理で、主に花火の回転中に行き詰まりました。後で transform-origin 属性を深く理解していなかったことがわかり、練習用の例を見つけました。属性についての理解が深まりました。 transform-origin属性理解不深，特地找了个例子来练习，加深了对属性的理解。

transform-origin作用

这个属性是用来改变元素变形的原点，一般用来配合旋转来使用最多。接收参数可为一个、两个、三个。当为两个值，分别代表距离盒模型左侧的值，如transform-origin: 50px 50px;

transform-origin関数

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

時計の時針の描画

真ん中の縦棒が初期設定で、残りはこれを元に回転させています

  <p>
    </p><p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  

CSSを見れば分かる通り以下のコードでは、回転の中心を最初の垂直線の (3,105)px に設定します。ここでの距離は、距離ボックス モデルの左側の値です。これを理解すると、他の時針を書くことができます。 、それらを別々に回転させて時針を取得します。ここの値がどの位置を基準にして計算されているのかがわからなかったので、いろいろ落とし穴にはまりました。

CSS

.hour {
  position: absolute;
  left: 105px;
  width: 6px;
  height: 50px;
  background-color: #000;
  border-radius:6px;
  -webkit-transform-origin:3px 105px; 
          transform-origin:3px 105px;
}
.hour:nth-child(2) {
  transform:rotate(45deg);
}
.hour:nth-child(3) {
  transform:rotate(90deg);
}
.hour:nth-child(4) {
  transform:rotate(-45deg);
}
.hour:nth-child(5) {
  transform:rotate(-90deg);
}

関連する推奨事項:

最も強力な第 4 世代 CSS レイアウト技術である CSS レイアウトの開発の歴史の概要

CSS での border-sizing 属性の使用法

CSS とは? CSS カスケード スタイル (コード) の紹介 🎜🎜🎜

以上がCSSのtransform-originプロパティは何をするのでしょうか?変換元属性の役割の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。