どうも！LSSです！！
CSSには３Dを表現するためのプロパティが用意されています。
参考：【CSS】ブロック遊び【実験】 - Little Strange Software
が、少々欠点もあって…例えば「球」を表現するのが苦手だったりもするんですね。
一方で、radial-gradientを用いて「球っぽい円」を描く事はできますが、
これも３D回転させると平面の円である事が露呈してしまいます。
今回は実験的に「CSSの3D表現を使わず、疑似的に３Dっぽい動きを表現」する事に挑戦してみました。
疑似３D
コード
<style>
@keyframes d3dax{
0%{background-position-x:0%;}
100%{background-position-x:100%;}
}
@keyframes d3day{
0%{background-position-y:0%;background-size:20px 20px;}
100%{background-position-y:100%;background-size:90px 90px;}
}
.d3d{
height:200px;
background-color:black;
background-image:radial-gradient(farthest-side,#ffffff,#bbbbbb 39.9%,#4444ffdd 40%,#4444ff00 100%);
background-repeat:no-repeat;
animation:
d3dax 5s ease-in-out 2.5s infinite alternate
,d3day 5s ease-in-out infinite alternate;
}
</style>
<div class="d3d"> </div>
２つのkeyframesで「横の動き」と「縦の動き＋サイズ変更」を分けています。
赤文字の5sがアニメーションの再生時間（5秒）です。
alternateをつけているので、実際に一周するのには倍の10秒かかっています。
オレンジの2.5sが「最初の１回だけ発生する遅延」で、これを5sの半分の長さにしている事で、ちょうど縦の動きと横の動きが「楕円っぽい」動きになっています。
※３Dも疑似なら、楕円も疑似で、正確には楕円ではなかったりもしますｗ
遅延の値を変更してみるのも面白いかも
例えば、遅延の「2.5s」を「1.5s」に変えてみると、次のような動きになります。
楕円（’疑似）が傾いたような動きになりました。
ちなみに、削除する（0sを指定するとの同じ）と、
単なる対角線移動となります。
横の動きと縦の動きを別々に指定する事、ease-in-outでクセのある再生、そして遅延を加えてずらす事、これらの組み合わせで動きに新たなクセが生じるのが面白いですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
