回転効果を実現できる CSS のプロパティは何ですか?-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2023-01-04 09:34:39

オリジナル

5170 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 のプロパティは何ですか?