CSS回転効果
CSS 回転効果は Web 開発でよく使用される効果で、Web ページにダイナミックさと美しさを加えることができます。この記事では、CSS でのtransform 属性を使用して回転効果を実現する場合の関連知識を紹介します。
1. トランスフォーム属性の概要
CSS3 のトランスフォーム属性は、移動、拡大縮小、回転、面取りなどの操作を含む HTML 要素を変換するために使用されます。パラメータを使用して、さまざまな変形効果を実現します。すべてのブラウザと互換性を持たせるために、transform 属性には、-webkit-transform、-moz-transform、-o-transform、transform などのプレフィックスを付ける必要があります。このうち、-webkit-transform は Webkit カーネル ブラウザに適応するために設定されたプレフィックスです。
2. 回転効果の実装
変換属性は、行列、移動、拡大縮小、回転、傾斜などの変換関数を通じて制御できます。この記事では、回転の使用に焦点を当てます。関数。
- 回転単位
CSS の回転単位は角度またはラジアンで表すことができ、通常は角度が回転単位として使用されます。角度は度単位で測定されるため、回転角度を数値で表すことができます。たとえば、45 度回転するには、rotate(45deg) を使用します。さらに、CSS のラジアンは rad 単位で測定され、1rad は 180°/π≈57.3 度に相当します。
- 回転の実現
回転効果は回転関数によって実現されます。回転関数には回転角度を示すパラメーターが必要です。同時に、この関数を他の変換関数と組み合わせて使用して、複雑な変換効果を実現することができます。
以下は、回転効果を実現するコード例です。
上記のコードでは、div 要素が 45 度回転され、rotate という名前のスタイルが Webkit カーネルを設定します。 Mozilla Firefox ブラウザと Opera ブラウザの回転効果により、ブラウザの互換性を確保するために標準の構文変換スタイルも追加されます。
- 3D 回転効果の実現
2 次元の回転効果に加えて、transform 属性により 3D の回転効果も実現できます。 3D 回転効果を実現するには、回転関数の 3 つのパラメータを使用する必要があります。最初のパラメータは回転角度、2 番目のパラメータは回転軸、3 番目のパラメータは回転の遠近効果です。
以下は 3D 回転効果を実現するサンプル コードです: