我很早就有了为网站开发留声机形式的音频播放器的想法。我已经创建了一个旋转记录，我没有预见到案例背后有什么特别的复杂性，但是我还想在 CSS 上制作一个带喇叭的针，这样你就可以用鼠标抓住、抬起和重新排列针从一个地方记录到另一个地方。我想根据一个示例模型，如这些图片中所示：
有人对此有任何想法吗？如果是，我将不胜感激。我附上了旋转板的草图代码：
let garmony = [1, 2, 5, 7, 9, 17];
for(i = 0; i < 2 * Math.PI; i += 0.015){
let translateZ = 0;
for(j = 0; j < garmony.length; j ++){
translateZ += 0.7 * Math.sin(i * garmony[j]);
}
let d = document.createElement('span'),
x = 100 + Math.floor(100 * Math.sin(i)),
y = 100 + Math.floor(100 * Math.cos(i));
d.style.transform = 'translateX(' + x + 'px) translateY(' + y + 'px) translateZ(' + translateZ + 'px)';
s.append(d);
}*{
transition: 2s;
}
#c{
transform: translateX(0px) rotateX(70deg) rotateZ(0deg);
transform-style: preserve-3d;
}
#s{
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: progress 10s linear infinite;
}
span{
position: absolute;
width: 2px;
height: 2px;
border-style: solid;
border-width: 0px;
background: black;
}
@keyframes progress{
from{transform: rotateZ(0deg);}
to{transform: rotateZ(360deg);}
}<div id=c><div id=s></div></div>
有一种旋转记录的愿望。
您的方法效率极低，因为它创建了 400 多个元素。事实上，你可以只用 CSS 和渐变来绘制盘子。为了让盘子在旋转过程中感觉像是在旋转，你可以使用一些技巧：
当然，您需要设计一个可以放置 3D 对象的场景。我最终得到了这个（最好将其扩展到整个页面）：
UPD
厌倦了观看唱片旋转。我想控制针...
夹持针的支架设计有两个自由度。它就像一只机械手。拥有 3D 场景，很容易实现这一点。最主要的是要对物体旋转的点有一个很好的了解。要表达“方阵”，您只需将一个嵌套到另一个中，然后子元素将考虑到父元素的转换。
第一个角度设置针在唱片上的位置，第二个角度允许您将针抬起至上方。剩下的就是实现一个简单的拖放，将第一个角的值与标签的播放位置同步
<audio>，不要忘记播放和暂停事件。我用普通的女主角非常原始地画了它。所有元素都可以在棱镜的基础上构建，使用 CSS 相对容易创建。
我把标准播放器放在角落里，这样你就可以检查同步了。可以用鼠标移动针。享受：
毫无疑问，WebGL 和 Three.js 在这个项目的实施中提供了更大的视角。
在动针的部分，甚至头部应该适合
其中 max=9 是可包含的曲目的限制。在这种情况下，拖动指针将在轨道之间切换。抬起头来，当然是一个标签包裹的复选框。或者如果通过拖动进行狩猎，则再次进行范围但范围为 1-2。就头部的视觉布局而言，就算是xs……也懒得细看，但明明没有什么复杂的，喉舌会比较吃力。
喇叭的扩展部分 - 单个容器中的 3+ 个块，在 2D 中旋转 40 45 度。+ 玩一点透视 https://webref.ru/css/value/perspective 您 也可以尝试一个表格，表格的每一列都会应用不同的透视图。
喇叭输出，从左图 - 贴在透视表的末端，例如，带有圆形按钮。在右边......又是一堆具有不同旋转角度和透视角度的块。或者只是一个带有背景图像的圆形块。
我是这样介绍的。
顺便说一句，如果你想用针“缠绕”轨道，你可以尝试将它绑定到标签的进度条
尝试
这是将简单播放列表连接到获胜者变体的实现：
您可以通过单击曲目名称、使用向上和向下箭头键以及使用
<<和按钮来切换曲目>>。