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

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

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

transform-origin作用

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

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

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

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

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