Question

所以基本的想法是在弯曲的桌子上有1-9个座位，就好像你是通过第一人称视角看着它们一样。我试图获得div元素，这些元素将在另一个具有边界半径的div元素的外部流动，以使其成为半椭圆形圆。我发现了一些示例，其中一个元素被动画化，以弧形流过容器，但我需要div / seat是静态的。我正在寻找可以引导我走上正确道路的任何想法或例子。

Answer 1

在椭圆上查找点并进行翻译：

如果您的椭圆形圆形类似于椭圆形，那么您可以使用数学公式在椭圆上找到点，然后将每个div元素转换为该特定点。

用于计算椭圆上的点(x,y)的{p> Mathematical formula为(a * cos(t), b * sin(t))。在此公式中，a表示椭圆在x轴上的半径，b表示椭圆在y轴上的半径，t表示以弧度表示的角度。弧度角度=角度度* pi / 180。

要使用此方法，我们会执行以下操作：

将div元素绝对放在椭圆的中心点。
计算与每个角度对应的(x,y)，并使用div将transform: translateX(...) translateY(...)翻译到其位置。角度为22.5度，因为总共有9个元素放置在180度内。

＆＃13;

.container {
  position: relative;
  height: 400px;
  width: 600px;
  padding: 12.5px;
  border: 1px solid;
  border-radius: 50%;
}
div > div {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 50%;
  width: 50%;
  transform-origin: bottom right;
}
div > div:after {
  position: absolute;
  content: '';
  bottom: 0px;
  right: 0px;
  height: 25px;
  width: 25px;
  background: black;
  border-radius: 50%;
  transform: translateX(50%) translateY(50%);
}
div > div:after {
  background: red;
}
div > div:nth-child(n+4):after {
  background: orange;
}
div > div:nth-child(n+7):after {
  background: green;
}
div > div:nth-child(1) {
  transform: translateX(-300px) translateY(0px);
}
div > div:nth-child(2) {
  transform: translateX(-277.17px) translateY(-76.5px);
}
div > div:nth-child(3) {
  transform: translateX(-212.13px) translateY(-141.42px);
}
div > div:nth-child(4) {
  transform: translateX(-114.80px) translateY(-184.77px);
}
div > div:nth-child(5) {
  transform: translateX(0px) translateY(-200px);
}
div > div:nth-child(6) {
  transform: translateX(114.80px) translateY(-184.77px);
}
div > div:nth-child(7) {
  transform: translateX(212.13px) translateY(-141.42px);
}
div > div:nth-child(8) {
  transform: translateX(277.17px) translateY(-76.5px);
}
div > div:nth-child(9) {
  transform: translateX(300px) translateY(0px);
}

＆＃13;

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

＆＃13;

^{注意：坐标是近似值，因此它们可能无法正确对齐。}

使用旋转和缩放变换：（原创想法）

以下代码段提供了关于如何沿着圆圈定位元素的非常粗略的想法。它绝不是一个完整的输出，但你可以根据自己的需要进行调整。

组件非常简单：

一个容器元素，它是一个圆圈，用作座位所在的参考元素。

每个座位有9个div个元素。所有这些容器都有50％width容器和50％height。

附加到子:after元素的伪元素（div），它们产生像座位一样的圆/点，它们绝对位于容器的底部。

每个子div元素都会被180/(n-1)度旋转，因为我们需要它们围绕半圆定位。

＆＃13;
＆＃13;
.container { position: relative; height: 200px; width: 200px; border: 1px solid; border-radius: 50%; } div > div { position: absolute; top: 0px; left: 0px; height: 50%; width: 50%; transform-origin: bottom right; } div > div:after { position: absolute; content: ''; bottom: 0px; left: 0px; height: 25px; width: 25px; background: black; border-radius: 50%; transform: translateY(50%); } div > div:nth-child(1) { transform: rotate(0deg); } div > div:nth-child(2) { transform: rotate(22.5deg); } div > div:nth-child(3) { transform: rotate(45deg); } div > div:nth-child(4) { transform: rotate(67.5deg); } div > div:nth-child(5) { transform: rotate(90deg); } div > div:nth-child(6) { transform: rotate(112.5deg); } div > div:nth-child(7) { transform: rotate(135deg); } div > div:nth-child(8) { transform: rotate(157.5deg); } div > div:nth-child(9) { transform: rotate(180deg); } div > div:after { background: red; } div > div:nth-child(n+4):after { background: orange; } div > div:nth-child(n+7):after { background: green; } /* Just for demo */ .container{ transition: all 1s; } .container:hover { height: 400px; width: 400px; transition: all 1s; }
＆＃13;
<div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
＆＃13;
＆＃13;
＆＃13;

有一种简单方法可将上述方法转换为椭圆形，这将是在X轴上缩放容器。需要注意的一点是，孩子们也会被缩放，因此需要进行逆向变换。

＆＃13;
＆＃13;
.container { position: relative; height: 200px; width: 200px; border: 1px solid; border-radius: 50%; transform: scaleX(1.25); transform-origin: left; } div > div { position: absolute; top: 0px; left: 0px; height: 50%; width: 50%; transform-origin: bottom right; } div > div:after { position: absolute; content: ''; bottom: 0px; left: 0px; height: 25px; width: 25px; background: black; border-radius: 50%; transform: translateY(50%); } div > div:nth-child(1) { transform: rotate(0deg); } div > div:nth-child(2) { transform: rotate(22.5deg); } div > div:nth-child(3) { transform: rotate(45deg); } div > div:nth-child(4) { transform: rotate(67.5deg); } div > div:nth-child(5) { transform: rotate(90deg); } div > div:nth-child(6) { transform: rotate(112.5deg); } div > div:nth-child(7) { transform: rotate(135deg); } div > div:nth-child(8) { transform: rotate(157.5deg); } div > div:nth-child(9) { transform: rotate(180deg); } div > div:after { background: red; } div > div:nth-child(n+4):after { background: orange; } div > div:nth-child(n+7):after { background: green; } /* Just for demo */ .container { transition: all 1s; } .container:hover { height: 400px; width: 400px; transform: scaleX(1.25); transform-origin: left; }
＆＃13;
<div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
＆＃13;
＆＃13;
＆＃13;

第一种方法是完美和推荐的方法，因为它不会导致div元素的任何失真。第二个是粗略的想法，它避免了复杂的三角计算。

Div元素遵循CSS3的曲线路径

1 个答案: