Я сделал это все кофе животворящий по утрам!!!
Естественно не доделанно но хоть направление надо же научить плохому =)
Ползунки проще двигать с клавиатуры и нет проверок на недопустимые значения
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><style>
div#place { position:relative;width: 500px;height:500px;border: 4px solid black;background: rgb(169 197 169);}
div#doker { position: absolute;top:50%;left:50%;border: 2px solid rgb(255,0,0);perspective:800px;}
ul#diagramm{margin: 0;padding: 0;transform-style: preserve-3d;}
ul#diagramm > li{ display: block;border: 1px solid rgba(0,0,50,1);height: 50px;width: 50px;position: absolute;
background: linear-gradient(345deg, rgb(161 30 1) 0%, rgb(209 142 19) 35%, rgb(210 230 255) 100%);}
</style><script>
"use strict";
function KungFU (p){
const j = {};
j.k1 = 16;j.k2 = 12;j.k3 = 3;j.k4 = 8;j.k5 = -20;j.k6 = -20;j.k7 = 48;j.k8 = 0;j.k9 = 0;
j.start =(elementID)=> {
j.mainElementHTML = document.getElementById(elementID);
j.ElementNullXYZ = j.mainElementHTML.firstElementChild;
j.ElementScene = j.ElementNullXYZ.firstElementChild;
j.arr = j.ElementScene.children;
j.ElementSetPosition();
return j;
}
j.Rotate = () => {
j.ElementScene.style.transform = "rotateX("+j.k8+"deg) rotateY("+j.k9+"deg)";
}
j.SetParam = (e) => {
}
j.ElementSetPosition = ()=> {
let radiusSpiral = j.mainElementHTML.clientHeight / j.k1; let segmentCircle = j.k2;let addStep = radiusSpiral / segmentCircle ;
let step = radiusSpiral * j.k3;let x,y,z;
let f = Math.PI * 2 / segmentCircle; let d = f*j.k4;
for ( let i=0 ; i < j.k7 ; i++ ){
d += f;
x = step * Math.cos(d) + j.k5;
y = step * Math.sin(d) + j.k6;
step += addStep;
j.arr[i].style = 'transform: translate3d('+x+'px, '+y+'px, '+(i)+'px) rotateX(-0deg) rotateY(-0deg) rotateZ('+(i%segmentCircle)/segmentCircle * 360+'deg);';
}
}
window.j = j;
return j.start(p);
}
document.addEventListener("DOMContentLoaded", ()=> KungFU("place") );
</script></head><body>
<div id="place"><div id="doker"><ul id="diagramm">
<li>1<img src="https://javascript.ru/forum/image.php?u=12207&dateline=1432960730"/></li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li>
<li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li><li>48</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li>
</ul></div></div>
<p >
<input type="range" min="-100" max="100" value="16" onchange="j?j.ElementSetPosition(j.k1=value):0"/>
<input type="range" min="-100" max="100" value="12" onchange="j?j.ElementSetPosition(j.k2=value):0"/>
<input type="range" min="-100" max="100" value="3" onchange="j?j.ElementSetPosition(j.k3=value):0"/>
<input type="range" min="-100" max="100" value="8" onchange="j?j.ElementSetPosition(j.k4=value):0"/>
<input type="range" min="-100" max="100" value="-20" onchange="j?j.ElementSetPosition(j.k5=value):0"/>
<input type="range" min="-100" max="100" value="-20" onchange="j?j.ElementSetPosition(j.k6=value):0"/>
<input type="range" min="-100" max="100" value="48" onchange="j?j.ElementSetPosition(j.k7=value):0"/>
<input type="range" min="-360" max="360" value="48" onchange="j?j.Rotate(j.k8=value):0"/>
<input type="range" min="-360" max="360" value="48" onchange="j?j.Rotate(j.k9=value):0"/>
</p>
</body></html>