CSS3エッセイシリーズtransform (1)--transform-origin_html/css_WEB-ITnose

transform-origin 属性は、変換が依存する原点を決定するために使用されることはほとんどないようです。基本的な属性の特性については、CSS マニュアルを参照してください。

H5 アニメーション プロジェクトで回転を使用する場合、それを過小評価することはできません。

スイングエフェクトを作る場合

実は写真を切り取るときに注意が必要なのですが、一見するとエリアレイヤー全体が回転していると勘違いしてしまう人も多く、transformと書かれてしまう可能性があります。 -origin:center top;

実際、正しい回転点は線の上部の点です。

画像がこのように切り取られた場合、回転された位置は、現在位置の横座標ピクセル/切り取られた要素の幅 27 / 190 =14% となり、transform-origin と書く必要があります。 :14% top ;

もちろん、この写真を例にとると、写真を切り取るとき、このように切り取ることができます

この場合、原点は transform- と直接書くことができます。 origin:0 0;

注目に値します。はい、デフォルトは要素の中心 (中央中心または 50% 50% 回転) に基づいているため、定義する必要があります。

少し前に H5 シーン ショー プロジェクトがたくさんあったので、私自身のレビューとみなすことができる、変換とアニメーションに関するいくつかの内容を編集して共有するつもりです。

何年もブログを書いていませんでした、また宦官にならないことを願っています...