CSSのtransform-originプロパティは何をするのでしょうか?変換元属性の役割-CSSチュートリアル-php.cn

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

不言

リリース： 2018-08-01 14:36:49

オリジナル

4309 人が閲覧しました

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

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

`transform-origin`作用

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

transform-origin関数

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

時計の時針の描画

真ん中の縦棒が初期設定で、残りはこれを元に回転させています CSSのtransform-originプロパティは何をするのでしょうか?変換元属性の役割

  <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);
}

ログイン後にコピー