序文 最近、花火アニメーションを作成しました。花火が散るアニメーションです。アニメーションの実装中、花火の回転で主に行き詰まりました。後でわかったのですが、それは主に このプロパティは、要素の変形の原点を変更するために使用され、回転と組み合わせて使用されることが最も一般的です。受信されるパラメータの数は 1、2、または 3 です。 2 つの値の場合、 時計の時針の絵 中央の縦棒は初期設定で、それに基づいて次の縦棒が回転します。 <div class="時計"> <div class="時間"></div> <div class="時間"></div> <div class="時間"></div> <div class="時間"></div> <div class="時間"></div> </div> 以下の CSS コードからわかるように、回転の原点として最初の垂直線の (3,105) ピクセルに回転中心を設定します。ここでの距離は、ボックス モデルの左側からの値です。これを理解すると、他の時針を記述し、それらを個別に回転させて時針を取得できます。ここでの計算値の相対的な位置を理解していなかったため、多くの落とし穴に陥ってしまいました。 CS 。時間 { 位置: 絶対; 左: 105px; 幅: 6px; 高さ: 50px; 背景色: #000; 境界線の半径:6px; -webkit-transform-origin:3px 105px; 変換の原点:3px 105px; } .hour:n番目の子(2) { 変換:回転(45度); } .hour:n番目の子(3) { 変換:回転(90度); } .hour:n番目の子(4) { 変換:回転(-45度); } .hour:n番目の子(5) { 変換:回転(-90度); } 参照する 翻訳 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Vueはvueメタ情報を使用して各ページのタイトルとメタ情報を設定します。
>>: MySQL で自動インクリメントシーケンスを実装するためのサンプルコード
ブラウザの問題かもしれないと思うかもしれませんが、スタイル定義の順序が間違っている可能性が高いです。...
JavaScript は現在、毎年新しいバージョンがリリースされており、より便利で効率的な新しい演算...
1. 問題複数のフローティング要素は親要素の幅を拡張できず、親要素の高さが 0 になる可能性がありま...
MySQLは独立した書き込み分離を設定します。コードに次のものを書くと問題が発生する可能性があります...
パフォーマンスの黄金律:エンドユーザーの応答時間のわずか 10% ~ 20% が HTML ドキュメ...
目次質問背景アイデアと実装質問次のように、同時実行 Promise の数を制御するメソッドを記述する...
インターネット上には、expect を使用して自動ログインを実現するスクリプトが多数存在しますが、明...
セマンティクスについて意味論は、記号やシンボルとそれらが表す意味との関係を研究する学問です。言語学で...
今日、最終プロジェクトに取り組み始めましたが、今年はMySQLデータベースを使用したため、Navic...
1. docker.serviceファイルを編集する: : vi /usr/lib/systemd/...
pthread_create関数機能紹介pthread_createはUNIX環境のスレッド作成関数...
最初のもの:コードをコピーコードは次のとおりです。 <html> <ヘッド>...
序文以前、defineProperty を紹介したとき、オブジェクトの変更のみを監視でき、配列の変更...
他の種類のデザインとは異なり、Web デザインは時代の発展とともに常に変化しています。したがって、W...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...