いつも読んで頂きありがとうございます。
SFと言えばLSSさんの【CSS】疑似3D前後関係で地球？が太陽？の向こう側を周る時は
隠れ、手前側を周る時には太陽を隠すコードがあります。
太陽系を作ってみよう
太陽の周りを地球が周回させるのはLSSさんのコードに画像を入れると出来ます。
そこで太陽系の惑星を配置してみようかと思ってコードを弄っていましたが横軸の配置
が上手く出来なかったのでLSSさんに相談しました。
私が相談するの何か月ぶりだと思います。そしてLSSさんんから返答を頂いています。
のんべえ様、コメントありがとうございます！
xの移動は最初だけ2.5秒の遅延がありますが、その遅延中の話でしたら…
.d3dz div:nth-child(1)
の中にbackground-position-xを指定して、初期位置を決めてあげる、という手があります^^
この返事を頂く前に同じ設定を試しましたが思ったような動きではありませんでした。
しかし、コードを見つめなおしbackground-position-x:○○%;で再度設定してみると上手
く出来ました。私の設定ミスでございました。
太陽系軌道シュミレーション
太陽系の惑星の配置をして軌道のシュミレーションをしてみました。
最後に
作ってはみたもののどうなのかなと思っています。
平行に動かすより円で動かした方が分かりやすいのかなとも思ったり。
まあ、とりあえず作ってみたということでｗ
今回参考にしたブログはこちら
【CSS】疑似３D 前後関係 - Little Strange Software
keyframesのbackground-position-xを0%でなく10%や20%にしても0％からのスタートになるんですが他に設定変える所あります？