CSS回転効果

CSS 回転効果は Web 開発でよく使用される効果で、Web ページにダイナミックさと美しさを加えることができます。この記事では、CSS でのtransform 属性を使用して回転効果を実現する場合の関連知識を紹介します。

1. トランスフォーム属性の概要

CSS3 のトランスフォーム属性は、移動、拡大縮小、回転、面取りなどの操作を含む HTML 要素を変換するために使用されます。パラメータを使用して、さまざまな変形効果を実現します。すべてのブラウザと互換性を持たせるために、transform 属性には、-webkit-transform、-moz-transform、-o-transform、transform などのプレフィックスを付ける必要があります。このうち、-webkit-transform は Webkit カーネル ブラウザに適応するために設定されたプレフィックスです。

2. 回転効果の実装

変換属性は、行列、移動、拡大縮小、回転、傾斜などの変換関数を通じて制御できます。この記事では、回転の使用に焦点を当てます。関数。

1. 回転単位

CSS の回転単位は角度またはラジアンで表すことができ、通常は角度が回転単位として使用されます。角度は度単位で測定されるため、回転角度を数値で表すことができます。たとえば、45 度回転するには、rotate(45deg) を使用します。さらに、CSS のラジアンは rad 単位で測定され、1rad は 180°/π≈57.3 度に相当します。

2. 回転の実現

回転効果は回転関数によって実現されます。回転関数には回転角度を示すパラメーターが必要です。同時に、この関数を他の変換関数と組み合わせて使用​​して、複雑な変換効果を実現することができます。

以下は、回転効果を実現するコード例です。

c9ccee2e6ea535a969eb3f532ad9fe89
.rotate {

-webkit-transform: rotate(45deg); /* Webkit内核浏览器 */
-moz-transform: rotate(45deg); /* Mozilla Firefox 浏览器 */
-o-transform: rotate(45deg); /* Opera 浏览器 */
transform: rotate(45deg); /* 标准语法 */

}
531ac245ce3e4fe3d50054a55f265927
41f4583e9f567ac77c0973b98d0bbcc9Hello, World!16b28748ea4df4d9c2150843fecfba68

上記のコードでは、div 要素が 45 度回転され、rotate という名前のスタイルが Webkit カーネルを設定します。 Mozilla Firefox ブラウザと Opera ブラウザの回転効果により、ブラウザの互換性を確保するために標準の構文変換スタイルも追加されます。

3. 3D 回転効果の実現

2 次元の回転効果に加えて、transform 属性により 3D の回転効果も実現できます。 3D 回転効果を実現するには、回転関数の 3 つのパラメータを使用する必要があります。最初のパラメータは回転角度、2 番目のパラメータは回転軸、3 番目のパラメータは回転の遠近効果です。

以下は 3D 回転効果を実現するサンプル コードです:

c9ccee2e6ea535a969eb3f532ad9fe89
.rotate3d {

-webkit-transform: rotate3d(1,1,0,45deg); /* Webkit内核浏览器 */
-moz-transform: rotate3d(1,1,0,45deg); /* Mozilla Firefox 浏览器 */
-o-transform: rotate3d(1,1,0,45deg); /* Opera 浏览器 */
transform: rotate3d(1,1,0,45deg); /* 标准语法 */

}
69a775f83fc18b8b5b447531d5ff3f85Hello, World!16b28748ea4df4d9c2150843fecfba68

上記のコードでは、div 要素は (1,1 を中心とした 45 度の 3D 回転を実装しています) ,0) axis その結果、互換性のためにすべてのブラウザのプレフィックスも追加されます。

3. 概要

transform 属性の回転関数を使用すると、Web ページ要素の回転効果を実現でき、また 3D 回転効果も実現できます。これらの方法を適切に使用すると、Web ページの要素をより鮮やかでダイナミックにすることができます。

以上がCSS回転効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。