CSS3 を使用して要素を回転する方法 (コード例)

Web デザインでは、回転効果によってページに動的な効果が追加され、ページがより鮮やかになります。 CSS3 を使用すると、さまざまな回転効果を簡単に実現できます。ここではCSS3の回転コードの使い方を学びましょう。

1. 要素を回転する

transform 属性を使用すると、要素を簡単に回転できます。要素を回転するには、次のコードを使用できます。

.rotate {
    transform: rotate(30deg);
}

上記のコードは、要素を時計回りに 30 度回転します。

さらに、負の値を使用して要素を反時計回りに回転することもできます。例:

.rotate {
    transform: rotate(-30deg);
}

2. 回転中心点

デフォルトでは、要素の回転の中心点は要素の中心点です。ただし、transform-origin 属性を変更することで要素の回転中心点を変更できます。例:

.rotate {
    transform: rotate(30deg);
    transform-origin: top left;
}

上記のコードは、左上隅を回転中心点として要素を回転します。同時に、次のコードを使用して回転中心点を設定することもできます。

.rotate {
    transform: rotate(30deg);
    transform-origin: 50% 50%;
}

上記のコードは、回転中心点を要素の中心点として設定します。

3. 3 次元回転

transform 属性を使用すると、3 次元回転を実行して、要素を 3 次元空間内で回転させることもできます。例:

.rotate {
    transform: rotateX(30deg);
}

上記のコードを使用して要素を X 軸方向に回転するか、rotateY 属性とrotateZ 属性を使用して要素を Y 軸および Z 軸方向に回転します。

4. アニメーションによる回転

CSS3 を使用すると、アニメーションを通じて要素を回転することもできます。例:

.rotate {
    animation: rotate 2s infinite;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

上記のコードは、要素を 2 秒に 1 回回転させ、無限ループで回転させます。

概要

Web デザインでは、回転効果は非常に一般的です。 CSS3 を使用すると、2 次元回転、3 次元回転、アニメーション回転など、さまざまな回転効果を簡単に実現できます。上記のコードを学習すれば、Web ページに回転効果を簡単に追加できると思います。

以上がCSS3 を使用して要素を回転する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。