どうも！LSSです！！
【CSS】疑似３D 前後関係 - Little Strange Software
の回転体を増やしてみました。
疑似３D
コード
<style>
@keyframes d3dzx{
0%{background-position-x:var(--i);}
100%{background-position-x:calc(100% - var(--i));}
}
@keyframes d3dzy{
0%{background-position-y:40%;background-size:calc(40px - var(--s)) calc(40px - var(--s));}
100%{background-position-y:60%;background-size:calc(40px + var(--s)) calc(40px + var(--s));}
0%,49%{z-index:calc(10 - var(--z));}
50%,100%{z-index:calc(10 + var(--z));}
}
.d3dz{
position:relative;
height:200px;
background-color:black;
}
.d3dz div{
position:absolute;
top:0;left:0;
width:100%;height:100%;
background-repeat:no-repeat;
}
.d3dz div:nth-child(1){
background:radial-gradient(farthest-side,#ffffff 49%,#ffcc00 50%,#ffcc0000 100%) 50% 50%/80px 80px no-repeat;
z-index:10;
}
.d3dz div:nth-child(1) ~ div{
background-image:radial-gradient(farthest-side,var(--c1) 0%,var(--c2) 49%,var(--c3) 50%,var(--c4) 100%);
animation:
d3dzx var(--t) ease-in-out calc(var(--t) / 2) infinite alternate
,d3dzy var(--t) ease-in-out infinite alternate;
}
.d3dz div:nth-child(2){
--i:30%;
--z:1;
--s:10px;
--t:4s;
--c1:#888844;
--c2:#cc8844;
--c3:#ffff00;
--c4:#ffff0000;
}
.d3dz div:nth-child(3){
--i:20%;
--z:2;
--s:20px;
--t:6s;
--c1:#448844;
--c2:#44cc44;
--c3:#00ff00;
--c4:#00ff0000;
}
.d3dz div:nth-child(4){
--i:10%;
--z:3;
--s:30px;
--t:3s;
--c1:#444488;
--c2:#4444cc;
--c3:#0000ff;
--c4:#0000ff00;
}
.d3dz div:nth-child(5){
--i:0%;
--z:4;
--s:40px;
--t:5s;
--c1:#996644;
--c2:#cc8844;
--c3:#ffcc88;
--c4:#ffcc8800;
}
</style>
<div class="d3dz">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
CSS変数を使って、個々の回転体の設定を簡略化
HTMLでは、
<div class="d3dz">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
と、クラス指定したdivタグの中に５つの空divタグが入っています。
この中身のうち、１つめのdivタグは中央で動かずにいますが、残り４つが回転している物になります。
全てをコードで指定すると、回転体が増えるごとにコード量が膨大になるため、CSS変数を使って簡略化してみました。
最後の回転体を例に挙げると、
.d3dz div:nth-child(5){
--i:0%;
--z:4;
--s:40px;
--t:5s;
--c1:#996644;
--c2:#cc8844;
--c3:#ffcc88;
--c4:#ffcc8800;
}
↑の部分が設定箇所になります。
nth-child(5)
の数値が「いくつめのdivタグに対する指定か」で、
--i:0%;
が「一番左端にきた時の横位置」を指定しています。
一番右端にきた時の位置は「100% - var(--i)」で計算しているので、例えば30%を指定すると「30%～70%」の位置を左右往復する事になります。
--z:4;
は、「z-index座標の差分」です。
大きくするほど「外側扱い（手前を移動している間は大きくなり、向こう側を移動している時は小さくなる）」になります。
--s:40px;
は、「サイズの差分」です。
40pxを基準として、最大サイズは40px+40pxの80pxに、最小サイズは40px-40pxの0px、という事になります。
--t:5s;
は「アニメーションの再生にかける秒数」で、半周するのにかかる時間、という事になります。
小さくすると速く移動する事になります。
--c1:#996644;
--c2:#cc8844;
--c3:#ffcc88;
--c4:#ffcc8800;
回転体のグラデーション、４つの色から描いていますが、その４つの色を内側から順に指定しています。
最後の「--c4」は透明にしたいので、カラーコード6桁に「00」をつけた値にしています。
もっと凝った疑似３Dを見たい！という方は
のんべえさんがとても凝ったものを作っておられますので、ご紹介させてください。
個々の惑星に画像を使っておられ、太陽系を再現されています^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
