CSS3_html/css_WEB-ITnose のアニメーション TRANSFORM で理解する必要がある SKEW 変更の原則

Transform は、CSS3 の比較的安全なアニメーションです (パフォーマンスのため)。今日は、

skew の原理を理解します。使用頻度はそれほど高くありませんし、もちろん最低というわけでもありません。そのため、アニメーションでの使用は少し混乱します。

skew には skewX、skewY という 2 つの属性があります。実際、変更はこれら 2 つの値に基づいて行われます。

まず、最も基本的な skew 用語を見てみましょう。 .

図の四角形はボックスです。スキューのデフォルトの原点はボックスの中心点 (0,0) です。水平軸は Y 軸です。 X 軸は、これまでに説明した座標軸と同じです。この図は理解しやすいと思います。

を変更してみましょう。 skewX(10deg).

鉛筆ボックスは、元のボックスです。座標軸 X の観点から、最初に元の X 軸を 10 度回転させます。赤い X 座標軸に基づいてボックスの基本的な形状を作成します。これは、最も基本的な幾何学的変換です。詳細については説明しません。

以下、skewY(10deg) の変更点です。

これは上のボックスと同じですが、変更点は次のとおりです。はY軸用です。最終結果は赤いBOXです。

貼り付けます。 最終的な描画:

描画は下手ですO(∩_∩)O~ご自身で大きめの度数を試したい場合は、紙にペンで描いてみるとより印象が深くなります。

この記事は Wu Tongwei のブログに属します。

WeChat 公開アカウント: bianchengderen

元の記事。転載する場合は出典と対応するリンクを明記してください: http://www. wutongwei.com/front/infor_showone.tweb?id=154、皆さんも拡散と共有を歓迎します。