CSS3 は任意の点を中心とした回転を実装します-Continued_html/css_WEB-ITnose

一昨日「任意の点を中心とした回転を実装するCSS3」という記事を書きましたが、主に点を中心とした回転を実装します

今日は引き続き別の方法で実装します

まずはコードを見てみましょう。

Html

 <div class="smile">☺</div>

Css

.smile{

margin: 100px auto;

width: 80px;

アニメーション: アクション 10 秒リニア無限;

}

@keyframes アクション {

from {

transform: 回転(0度) 変換(100ピクセル) 回転(0度);

}

を{

変換: 回転(360度) 変換(100ピクセル) 回転(- 360度);

}

}

実際、コード サイズの点で、HTML は 1 つのタグと 1 つのアニメーションのみを使用します。ここでは主にアニメーションに焦点を当てます。最初の変換に 3 つのアニメーションを追加します。 3 つ目は、笑顔が回転できることを確認し、笑顔が正面であることを確認します

真顔が必要ない場合は、真顔を削除できます

中央のアニメーションは、平行移動アニメーションです。つまり、選択中にスマイリーフェイスが並進運動を実行します。これにより、この周囲の点を決定するには、必要に応じてスマイリーフェイスの位置を直接制御する必要があります。さまざまなポイントを設定するには、位置決めを使用して位置を制御することができます (コードを自分で入力して効果を試すことができます)

この記事は、Wu Tongwei のブログ、

WeChat パブリック アカウントに属します: bianchengderen、QQ グループ。 : 186659233

の元の記事、転載する場合は出典と対応するリンクを明記してください: http://www.wutongwei.com/front/infor_showone.tweb?id=178、皆さんも拡散と共有を歓迎します

。