如何仅使用css创建一条直线并围绕其中心旋转
要使用CSS创建一条直线并围绕其中心旋转，可以使用CSS的伪元素和transform属性来实现。
首先，创建一个HTML元素，例如一个div：
<div class="line"></div>然后，在CSS中定义该元素的样式：
.line {
position: relative;
width: 200px;
height: 1px;
background-color: black;
}
.line::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 1px;
background-color: black;
transform-origin: center;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}解释：
- 首先，给线条元素设置宽度和高度，以及背景颜色来表示一条直线。
- 使用伪元素::before来创建一个与线条相同的元素，并设置其宽度、高度、背景颜色。
- 使用transform-origin属性将旋转的中心点设置为元素的中心。
- 使用animation属性和@keyframes定义一个旋转动画，将伪元素围绕中心旋转。
这样，就可以通过CSS创建一条直线并围绕其中心旋转了。
推荐的腾讯云相关产品和产品介绍链接地址：
相关·内容
我是CSS的初学者。我找到了这个答案：。但我想知道，如果有可能只使用CSS而不使用JavaScript来旋转创建的行。
浏览 19提问于2017-12-22得票数 0
回答已采纳
1回答
我正在尝试围绕其端点旋转一条直线(细矩形)。我让它工作得很好，但第二步是缩短直线，并让它仍然围绕端点(旋转中心)旋转。}}self.rod.frame.size = CGSize(width: 3.00, height: rectSize)
但是，这会使长方体旋转，同时围绕不同的轴改变比例。
浏览 0提问于2016-09-30得票数 0
1回答
我有一个立方体的场景，我可以旋转偏航，俯仰和滚动。我这样做，点击圆圈，并拖动鼠标在x/y轴。我想要类似于编辑器模式下的团结旋转工具的功能。我的问题是，我不知道如何转换鼠标的运动，这样旋转就不会逆转，如果立方体在某个轴上旋转180度。以及如何使用正确的鼠标方向取决于立方体是如何旋转的。, diff.Y);
else if (selectedIntersect == Intersect.Roll) /
浏览 0提问于2014-04-30得票数 3
回答已采纳
1回答
2D中的OpenGL旋转
、、、
旋转功能使用feedback功能，讨论了和转换为原始数据的方法，建议使用。它的目的是围绕它的中心旋转一条线。buff[3]; glutPostRedisplay();但是，这两种平移似乎没有什么效果-线条仍然围绕窗口的左下角旋转如何在2D中绕直线的中心(或任意点)旋转</em
浏览 2提问于2010-12-06得票数 1
回答已采纳
1回答
因为我基本上必须重写整个程序来使用另一个矩形，所以我必须坚持使用framework元素。为了旋转这个东西，我添加了一条线和一个圆。到目前为止，矩形和线条的旋转工作正常。但是，尽管圆是围绕矩形的中心旋转的，但它也是围绕自己边界处的一个点旋转的。我用一个Rend
浏览 1提问于2018-10-16得票数 0
在这种情况下，组旋转在项目的位置上有偏差，并且不能很好地工作。假设item1先做了45度的局部旋转。然后将其与其他项目分组，并对该组应用30度的组旋转。那么item1就必须相对于自身总共
浏览 1提问于2013-03-31得票数 0
2回答
我想让UIButtons围绕一个中心点画圆弧。这可以用标准元素来完成吗？我是否需要创建一个自定义形状并用作按钮？或者我需要为下面的每个按钮提供一个自定义形状？
浏览 3提问于2015-03-24得票数 0
我将一个NSView围绕着它的中心旋转并验证了结果：
我通过更改框架原点来定位NSView，其结果也与预期的一样：frame.origin = CGPointMake(_position.x - frame.size.width，旋转中心就不再是视图的中心，而是一些其他的点。我
浏览 2提问于2013-04-16得票数 2
回答已采纳
在THREE.js中，物体绕自己的轴旋转有一些困难。我正在使用STLLoader导入格式的stl文件.stl-0，model.stl.stl-1，.model.stl.stl-13。/models/stl/binary/model.stl-'+ i + '.stl' );用于循环加载程序并导入所有文件。object.rotation.x = value;
这就是我试图旋转物体的方式。然而，每个模型都安排在一个拱内，在使用上
浏览 4提问于2014-11-10得票数 2
回答已采纳
1回答
旋转并使两条线平行
、、、、
我有两个带点的线段Line2 = (x3，y3)，(x4，y4) -更大1) (x1，y1)作为旋转的固定点或3)中心点作为旋转的固定点
浏览 1提问于2013-02-09得票数 0
回答已采纳
2回答
想像一下围绕着一个中心的给定递增半径的圆，由给定旋转的直线相交--我如何能够根据图像中的一个点位置，在其中一个网格位置内绘制一个近似的4边界矩形*，如图所示？
详细信息:我正在使用Lua作为移动应用程序。左上角坐标是0，0，所以中心是maxX / 2，maxY / 2；我使用变量rotationStep和radiusStep来创建网络。
浏览 0提问于2012-04-06得票数 2
4回答
这是一个场景:我有一个1px x 1px的精灵，我想要缩放一些x和y的量(每边不同的量)，然后我想要将这个精灵旋转一些角度，然后我想能够精确地定位整个东西(从左上角或中心，对我来说没有什么不同)。Matrix.RotationAxis( axis, angle ) *但它倾向于缩小旋转线的比例如果我在上面的调用结束时使用平移向量，或者如果我使用Sprite.Draw设置位置，这两种方法都不能
浏览 3提问于2009-03-11得票数 8
回答已采纳
要求它们以一条直线从侧面飞入，沿着一条略微弯曲的路径飞行。第一颗将转到中间，其他的将进入围绕第一颗的轨道，直到所有6颗都均匀地围绕着第一颗，在这一点上它们都停止了。最后，中心图形需要脉动。例如，我看过一些帖子，展示了如何使用CSS显示航天器连续绕行星运行，或者沿着弯曲的路径运行，但我可以按照我描述的方式设置吗？我如何让“故事”通过这些阶段？
提亚
浏览 14提问于2017-02-19得票数 0
2回答
我有一些模型，我想使用四元数在正常的方式旋转，除了旋转关于原点，我希望它被稍微抵消。我知道，在3d空间里，你不会说你围绕一个点旋转，你说你绕着一个轴旋转。所以我把它想象成一个矢量的旋转，它的尾巴不是在局部原点。在一个特定的情况下，我需要在世界空间中翻译一个物体，缩放它，
浏览 0提问于2011-11-01得票数 16
回答已采纳
2回答
我在我的代码中实现了一个简单的旋转手势，但问题是当我旋转图像时，它会离开屏幕/视图总是向右。
旋转中心X的图像视图离开或增加(因此它正好离开屏幕)。我希望它围绕当前的中心旋转，但由于某种原因，它正在发生变化。你知道是什么原因造成的吗？
浏览 6提问于2013-06-15得票数 0
3回答
我有一个旋转圆盘的视频，其中4个象限用交替的黑色和白色标记。磁盘会在一段时间内偏离中心。我的目标是跟踪旋转周期内圆盘的中心点。我已经使用MATLAB计算机视觉工具箱函数执行了掩蔽，以仅查看我感兴趣的区域，并执行了角点检测，以获得分隔象限的点。喜欢
现在，我如何得到中心点呢？1)如果我要在两点之间拟合一条曲线并找到交点，如何区分构成两条线的点？
2)有没有其他简单的方法来跟踪<
浏览 5提问于2011-12-06得票数 2
4回答
寻找二维三角形的中心？
、、、
我已经得到了一个带有x和y坐标的2D三角形的结构，一个旋转变量，等等。从这些x和y坐标创建的点开始，我应该围绕该点绘制一个三角形，并使用旋转变量对其进行适当的旋转。我的问题是以某种方式提取三角形的中心，并绘制其周围的顶点。
编辑:是的，我要找的是质心。
浏览 45提问于2009-02-07得票数 24
回答已采纳
我正在使用以下代码创建roundview与它的层进度条，但进度条总是从左上角边，我想让它从顶部的视图中间开始
func buildRoundView1(roundView: UIView，total:
浏览 5提问于2021-06-10得票数 0
3回答
它们也可以以一定的角度绘制(旋转)。我想用我的鼠标移动来旋转那个矩形。this.Invalidate();}
{}
现在我的要求是旋转这个矩形，任何想法，如何实现。
浏览 1提问于2012-04-16得票数 0
回答已采纳
2回答
当涉及到测试计算机视觉算法对象检测时，通过旋转测试图像可以检测到一些遗漏的对象。通过这样做，由矩形中的每个点的(x，y)坐标表示的那些检测到的对象位置应该旋转回来。对象检测器的输出是Numpy阵列，其包含例如100个元素，每个元素具有4对点，表示被检测对象周围的矩形的(x，y)坐标，即具有(100,8)形状的Numpy阵列。这些对象是在原始图像的旋转版本中检测到的。因此，为了在原始图像上可视化，必须将它们旋转回来。原始图像的分辨率为5616x3744px，因此90度旋转版本的分辨率为37
浏览 23提问于2018-05-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
