Div元素遵循CSS3的曲线路径

时间：2015-09-03 12:34:29

标签： css css3 css-shapes css-transforms

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

1 个答案:

答案 0 :(得分：12)

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

如果您的椭圆形圆形类似于椭圆形，那么您可以使用数学公式在椭圆上找到点，然后将每个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;
＆＃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;
＆＃13;
＆＃13;

enter image description here

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

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

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

组件非常简单：

  • 一个容器元素，它是一个圆圈，用作座位所在的参考元素。
  • 每个座位有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元素的任何失真。第二个是粗略的想法，它避免了复杂的三角计算。

相关问题
最新问题