Div 个元素遵循 CSS3 的曲线路径

Question

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

Answer 1

在椭圆上求点并平移：

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

Mathematical formula计算椭圆上的点(x,y)是(a * cos(t), b * sin(t))。在这个公式中，a 代表椭圆在 x 轴上的半径，b 代表椭圆在 y 轴上的半径，t 代表以弧度为单位的角度。以弧度为单位的角度 = 以度为单位的角度 * pi / 180.

为了利用这种方法，我们执行以下操作：

将 div 个元素绝对放在椭圆的中心点。
计算每个角度对应的(x,y)，用transform: translateX(...) translateY(...)平移div到位。角度以 22.5 度为步长，因为总共有 9 个元素要放置在 180 度内。

.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);
}

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

^{注意：坐标为近似值，因此可能无法 100% 正确对齐。}

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

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

组件非常简单：

一个容器元素，它是一个圆形，用作定位座椅的参考元素。
每个座位有 9 个单独的 div 元素。他们都有 50% width 的容器和 50% height.
附加到子 div 元素的伪元素 (:after) 产生 circle/dot 样的座位，它们绝对位于容器的底部。
每个子 div 元素旋转 180/(n-1) 度，因为我们需要它们围绕半圆定位。

.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;
}

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

有一种简单的方法可以将上面的内容转换成椭圆形的圆，那就是在 X 轴上缩放容器。需要注意的一点是子级也会缩放，因此需要进行反向转换。

.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;
}

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

第一种方法是完美的推荐方法，因为它不会对 div 元素造成任何扭曲。二是粗略的思路，避免了复杂的三角函数计算。

Div 个元素遵循 CSS3 的曲线路径

Div elements to follow a curved path with CSS3

css

css-transforms

css-shapes