CSSがリングパスに沿って動く動画を公開

「CSSの秘密」では、純粋なcss 3アニメーションを使用して要素を環状経路に沿って移動させるユニークなアニメーションが発見されました.少し不思議に聞こえますが、本稿では、複雑から簡単、複数の構造から簡単な構造解剖CSS 3文まで、著者の文章に連れて行って、環状運動を実現します.
具体的なアニメーションスタイルのプレゼンテーション:リンクの内容
その他の補助的なCSSコードは、プレゼンテーションコードのソースコードを参照してください.ここではもう書きません.
じこかいてん
まず著者らは,画像が環状経路に沿って移動することを示し,画像が画像に沿って大きな円に沿って回転するように移動することを望む必要がある.キーコードは次のとおりです.

<div class="box box2"><div class="ball">Balldiv>div>
@keyframes spin{
    to{transform: rotate(1turn);}
}
.box2 .ball{
    animation:spin 3s infinite linear;
    transform-origin: 50% 150px;
}

円回りに回転して内容が回らない
図1は球の中心点で回転し、図2は150 px回りの半径で回転しながら自身も回転していることがわかる.効果はよさそうですが、自分も回っているので、文字が逆さまになって見えないという欠点があります.リングに沿って運動するだけで、自分で元の向きを保つ方法はありませんか.
2つの要素の解決方法が必要です
著者らは,以前の例「平行四角形」や「菱形画像」で述べた「ネストされた2層変形は互いに相殺される」ことを考え,内層の変形で外層の変形効果を相殺することを考えた.

<div class="box box3"><div class="ball"><div class="inner">Balldiv>div>div>
@keyframes spin{
    to{transform: rotate(1turn);}
}
@keyframes spin-reverse{
    from{
        transform:rotate(1turn);
    }
}
.box3 .ball{
    animation:spin 3s infinite linear;
    transform-origin: 50% 150px;
}
.box3 .inner{
    animation: spin-reverse 3s infinite linear;
}

上のコードを見ると、著者は最適化された空間があると感じ、内層アニメーションに親要素のすべてのアニメーション属性を継承させ、アニメーション名を上書きします.このようにアニメーションの属性を調整するには、最初のものを変更するだけでいいです.

.box3 .inner{
    animation:inherit;/*       */
    animation-name:spin-reverse;
}
                 ，            animate-direction，  reverse          。

.box4 .ball{
    animation:spin 3s infinite linear;
    transform-origin:50% 150px;
}
.box4 .inner{
    animation:inherit;
    animation-direction: reverse;
}

1つの要素を円の周りに回転
最後に著者らは,transform−originが2つのtranslate()によってシミュレートできることから,1つのHTML要素のみを用いて自身の回転を実現し,半径周りの運動を可能にすることを最適化した.

@keyframes spin2{
    from{
        transform: translate(50%, 150px)
        rotate(0turn)
        translate(-50%, -150px)
        translate(50%,50%)
        rotate(1turn)
        translate(-50%,-50%)
    }
    to{
        transform: translate(50%, 150px)
        rotate(1turn)
        translate(-50%, -150px)
        translate(50%,50%)
        rotate(0turn)
        translate(-50%,-50%)
    }
}
.box5 .ball{
    animation:  spin2 3s infinite linear;
}

実際、最も重要なのは座標の変換です.以下に示します.

transform: rotate(30deg);
transform-origin: x y;  // x, y               

//    
transform: translate(x, y)
           rotate(30deg)
           translate(-x, -y);
transform-origin:0 0;

互換性
IE 10以下のブラウザはサポートされていません.プレゼンテーションコードには最新版のCSS 3コードのみが表示されます.コードには互換性がありません.実際の使用ではautoprefixerプラグインを使用して互換性を持ってください.
本文はただ入門したばかりの学生や迷っている学生にいくつかのアドバイスをすることができることを望んで、合わないのは自分だけが最も理解しているので、伝言を歓迎します.また、初心者が先端开発を学ぶには、コードを叩くことが一番重要なのはやはり経験の交流です.必要な友达が先端开発交流群624293552に入って、一绪に问题の学习経験を交流することを歓迎します.私は初心者の学习に适したすべての教程の资料を中に入れました.