ホームページ > 記事 > ウェブフロントエンド > 回転効果を実現できる CSS のプロパティは何ですか?

回転効果を実現できる CSS のプロパティは何ですか?

青灯夜游オリジナル: 2021-04-06 17:33:215147ブラウズ

回転効果を実現できる属性は「transform」です。これは、rotate()、rotate3d()、rotateX()、rotateY() などの関数と一緒に使用する必要があります。変換属性は、要素に 2D または 3D 変換を適用するために使用され、要素を回転、拡大縮小、移動、または傾けることができます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

回転効果を実現できるCSSの属性は「transform」です。

transform プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。

transform 属性は回転の属性値を実現できます。

rotate(angle) は 2D 回転を定義し、パラメータで角度を指定します。
rotate3d(x,y,z,angle) 3D 回転を定義します。
rotateX(angle) X 軸に沿った 3D 回転を定義します。
rotateY(angle) Y 軸に沿った 3D 回転を定義します。
rotateZ(angle) Z 軸に沿った 3D 回転を定義します。

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    div,img,body{
        margin: 0;
        padding: 0;
    }
    img.touxiang:hover{
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }
    img.touxiang{
        margin: 0 auto;
        display: block;
        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        border-radius:100%;
    }
</style>
</head>
<body><br><br><br><br>
    <img src="touxiang.jpg" alt=""/>
</body>
</html>

レンダリング:

回転効果を実現できる CSS のプロパティは何ですか?

(学習ビデオ共有: css ビデオチュートリアル )

以上が回転効果を実現できる CSS のプロパティは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSで変数は使えるのでしょうか？次の記事：CSSで変数は使えるのでしょうか？

続きを見る