CSSを使用してdivの一定の回転を実現する方法

div の一定の回転を実現する Css メソッド: まず div 要素を作成し、それに ID 値を与えます。次に、インライン スタイルを使用して div にいくつかのスタイルを追加し、次に「@keyframes」ルールを使用してアニメーション回転; 最後にdivのアニメーションを指定します。

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

関連する推奨事項: 「css ビデオ チュートリアル 」

div 回転を常に実現するための css

1. 最初に作成しますdiv 要素に id 値 xuanzhuan を指定し、インライン スタイルを使用して div にいくつかのスタイルを追加します。

<div id="xuanzhun" style="width: 30px; height: 30px; background-color: aquamarine;">

2. 次に、@keyframes ルールを使用してアニメーションの回転を作成します

@-webkit-keyframes rotate{
    from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{
    from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{
    from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
}
@keyframes rotate{
    from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}

3. 最後に、div のアニメーションを指定します。

#xuanzhun{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}

効果:

以上がCSSを使用してdivの一定の回転を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。