Div元素遵循CSS3的弯曲路径 [英] Div elements to follow a curved path with CSS3

查看：415
本文介绍了Div元素遵循CSS3的弯曲路径的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以基本的想法是在一个弯曲的桌子上1到9个座位，好像你是通过第一人称视角看着他们。我试图获得 div 元素，这将是座位流在另一个 div 元素的外部有一个边界半径使其成为半椭圆形。我发现一些例子，一个元素是动画的，在弧中流过容器，但我需要div / seat是静态的。

解决方案

在椭圆上找到点和如果您的椭圆形圆形类似于椭圆形，那么您可以使用数学公式在椭圆形上找到点，然后将每个 div转换成





注意：坐标是近似值，

使用旋转和缩放变换（原始图片）：

）



下面的代码段提供了一个非常粗略的想法，用于如何沿着圆圈定位元素。



这些组件非常简单：





  • 一个容器元素是一个圆形，用作座椅所定位的参考元素。 div 每个座位的元素。所有人都有50％的宽度的容器和50％ height 。

  • 附加到子元素 div 的伪元素（：后）生成圆形/点状座位的元素

  • 每个子 div 元素旋转 180



class =snippetdata-lang =jsdata-hide =truedata-console =falsedata-babel =false>

< pre class =snippet-code-css lang-css prettyprint-override> .container {position：relative; height：200px; width：200px; border：1px solid; border-radius：50％;} div> div {position：absolute; top：0px; left：0px;身高：50％ width：50％; transform-origin：bottom right;} div> div：after {position：absolute; content：''; bottom：0px; left：0px; height：25px; width：25px;背景：黑色; 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;} / *只是用于演示* /。container {transition：all 1s;} .container：hover {height：400px; width：400px; transition：all 1s;} 

 < div class =容器> < 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;身高：50％ width：50％; transform-origin：bottom right;} div> div：after {position：absolute; content：''; bottom：0px; left：0px; height：25px; width：25px;背景：黑色; 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;} / *只是用于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 元素造成任何失真。第二个是粗略的想法，它避免了复杂的三角计算。


So the basic idea is 1 - 9 seats at a curved table as though you are looking at them through first person view. I'm trying to get div elements which would be seats to flow on the outside of another div element that has a border radius to make it a semi oblong circle. I've found a few examples with an element being animated to flow across the container in an arc, but I will need the div/seats to be static. I am looking for any ideas or examples that can lead me in the right path.

解决方案

Finding points on ellipse and translating:

If your oblong circle resembles an ellipse then you can find points on the ellipse using mathematical formula and then translate each div element to that particular point.

Mathematical formula for calculating point (x,y) on an ellipse is(a * cos(t), b * sin(t)). In this formula, a represents the radius of the ellipse in x-axis, b represents the radius of the ellipse in the y-axis and t represents the angle in radians. Angle in radians = Angle in degrees * pi / 180.

To make use of this approach, we do the following:

  • Place the div elements absolutely at the centre point of the ellipse.
  • Calculate the (x,y) corresponding to each angle and translate the div to its place by using transform: translateX(...) translateY(...). The angles are in steps of 22.5 deg because there are a total 9 elements to be placed within 180 degrees.

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

Note: The coordinates are approximate values and hence they may not align 100% correctly.

Using rotation and scale transform: (original idea)

The below snippet provides a very rough idea on how to position the elements along a circle. It is by no means a complete output but you can adapt it to fit your needs.

The components are very simple:

  • One container element which is a circle and serves as the reference element against which the seats are positioned.
  • 9 individual div elements for each seat. All of them have 50% width of the container and 50% height.
  • A pseudo-element (:after) attached to the child div elements that produce the circle/dot like seats and they are absolutely positioned at the bottom of the container.
  • Each child div element is rotated by 180/(n-1) deg as we need them to be positioned around a semicircle.

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

There is a simple method to convert the above into an oblong circle and that would be to scale the container in the X-axis. One point to note is that the children would also get scaled and hence would need to be reverse transformed.

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

The first method is the perfect and recommended approach as it doesn't cause any distortion to the div elements. The second is rough idea which avoids complex trigonometric calculations.

这篇关于Div元素遵循CSS3的弯曲路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆