CSS动画旋转元素360度旋转元素本身，围绕元素旋转

文章/答案/技术大牛

发布

1回答

html、css、animation、keyframe

我的HTML页面上有一个齿轮图标，我想要像现实世界中的齿轮一样旋转。我已经创建了一个控制旋转的CSS动画，但问题是齿轮本身并没有旋转，而是稍微旋转了一下，因此也改变了它的位置。

浏览 38提问于2020-10-18得票数 0

回答已采纳

1回答

向重复的背景图像纹理CSS3添加旋转

css、textures

是否可以将旋转添加到重复的背景图像纹理中？-我的意思不是旋转元素本身，而是旋转元素的背景图像？这将主要用于动画，因为您可以通过jQuery动画背景图像的旋转。

浏览 0提问于2011-12-23得票数 1

回答已采纳

1回答

可以在一个SVG元素上运行两个不同的动画吗？

javascript、svg、snap.svg

我正在使用Snap.svg来制作这个动画。基本上，我想围绕一个点旋转一个元素，但我希望元素在旋转时仍然朝向相同的方向。200,200)" .animate({ }, 6000); 在本例中，我需要"TEST“文本即使在旋转时仍然保持水平toransform=" rotate ()“已经应用于元素，所

浏览 1提问于2014-03-08得票数 1

3回答

围绕点旋转html元素

javascript、jquery、html、css、rotation

如何将html元素围绕任意点旋转。

浏览 1提问于2012-08-28得票数 0

回答已采纳

1回答

在Adobe Animate CC中旋转画布

animate-cc

我们已经使用Adobe Animate CC (使用actionscript 10.3)制作了一个动画广告横幅。我们已经考虑过调整画布的大小，然后分别旋转每一层。然而，这会弄乱布局，因为每个层都围绕自己的轴旋转，而不是画布本身。

浏览 17提问于2017-10-21得票数 0

1回答

SVG路径旋转动画

css、svg、css-animations

我试图让我的SVG的一部分旋转，但它似乎是围绕一个非常大的起源旋转，这是令人困惑的，因为实际的路径是难以置信的小。下面是我的path元素动画css： transform-origin: bottom right; 100% { transform: rotate(0deg); }} 下面是JSFiddle (包括S

浏览 1提问于2018-11-13得票数 1

回答已采纳

1回答

在网格上旋转矩形单元90度

javascript、jquery、css、rotation

我正在制作一个webapp，你可以在网格上放置元素，移动它们并旋转它们。当im使用jQuery向元素添加类时，就会发生旋转，而实际的旋转是由CSS进行的。我需要让元素在“错误”旋转后与网格保持一致。

浏览 4提问于2015-01-07得票数 5

回答已采纳

1回答

我正在尝试使用CSS3特性围绕它的中心旋转星号。为了指向该字符，我将其包装为一个span-element，这是一个内联元素。向它添加相应的CSS，跨度开始旋转，但它是围绕字符的中心旋转的。在大多数字体中，星号并不在字符的中心，所以它有点像碗，但并不真正旋转。为了纠正这一点，有(前缀) transform-origin: x y;属性，但是这里有一个问题:是否有可能将其他x和y处理到一个内联元素而不是中间元素<

浏览 1提问于2014-06-06得票数 0

回答已采纳

2回答

"Android“加载旋转CSS

html、css

在查看了Google的新之后，我想知道是否有任何方法可以像 (滚动到“循环”)下的加载旋转器那样使用HTML / CSS完成加载吗？我只做了一个非常(非常)简单的版本，但我不知道如何动画“边界”本身(就像最新版本的Android中的旋转器)。基本上，我只是使用border / border-radius: 50%;和无限CSS动画</e

浏览 5提问于2014-07-01得票数 1

回答已采纳

3回答

如何使用X=0、Y=0和Z=0以外的行使用CSS3旋转元素？

math、css

正如使用CSS3可以看到的那样，我们可以使用transform: rotate[XYZ](M deg/rad)围绕X、Y或Z轴旋转一个元素。如果你不明白，请拿着一张纸在它的两个遥远的角落(对于y=x或y=-x)。或者看看这张照片。更新

浏览 2提问于2011-09-29得票数 12

回答已采纳

3回答

SVG文本旋转

svg、jquery-svg

我有一个文本与textContent“设计”，这是转换与css旋转90度围绕中心(100,100)，所以它垂直显示。它围绕中心旋转整个坐标系，我希望元素(即“设计”)单独应该旋转结果：期望值：SVG：<text x="70" y="30" width="64为什么文本元素x的位置改变了？如何在固定的x位置旋转</em

浏览 8提问于2013-05-23得票数 5

1回答

Google Chrome排字器驱动的动画受主线程阻塞的影响

google-chrome、hardware-acceleration、blink

这是小提琴，显示了谜题： var i = 999999; i--;由于CSS动画是由排序驱动的页面更新，我希望主线程阻塞不会停止旋转器，但它会停止现在，奇怪的是，如果我将<em

浏览 3提问于2016-03-07得票数 1

回答已采纳

1回答

使用javascript在某一点(不使用转换原点)周围旋转元素。

javascript、rotation、trigonometry

我希望能够在元素被旋转到某个点之后返回它的一个协序。到目前为止，这就是我所掌握的(但这是不正确的)。document.getElementById("div").setAttribute("style","top:"+(result.y)+"px;left:"+(result.x)+"px;"); css

浏览 0提问于2012-02-07得票数 0

1回答

当div已经旋转时，自定义旋转该div

javascript、jquery、html、css

所有这些都在一个div里面，我正在旋转这个div。 <img src='images/big_circle.png'/><

浏览 0提问于2014-09-12得票数 0

回答已采纳

2回答

如何在CSS中的旋转元素上使用动画

javascript、css、css-animations

我有一个默认旋转90度的div元素。现在我想在点击的时候应用动画效果。有没有一种方法可以在动画的整个生命周期中保留旋转效果？当我使用动画时，我能够在动画生命周期的0%、50%和100%上定义CSS效果。但是元素有随机旋转90度或-90度的机会，我不能将硬编码的旋转放在关键帧定义中。1; 100% { height: 100%;

浏览 27提问于2019-10-28得票数 0

回答已采纳

2回答

旋转元素的大子层上的CSS3背面可见性

html、css

注: CSS在代码示例中。这个动画将在稍后的时候添加到JavaScript中，为了这个问题，假设会有10列10行，在一些带有糟糕浏览器的安卓手机中旋转100个元素肯定会看起来很奇怪。我想避免的是将旋转动画添加到每个“父”中，因为我知道每个动画都不会同时启动。 MY解

浏览 4提问于2015-04-22得票数 1

回答已采纳

1回答

如何将无限css动画链接到一次性css动画？

css、css-animations

我正在尝试动画元素旋转，就像有人开始了一个顶部。首先，元素会逆时针旋转，然后转换为顺时针无限旋转。我所拥有的通用CSS如下： animation: Rotate 500ms linearkeyframes Rotate { to { transform:rotate(360de

浏览 4提问于2013-04-29得票数 4

回答已采纳

1回答

FabricJS绕X、Y轴旋转

javascript、fabricjs

有人知道如何在fabric.js中围绕对象的X轴或Y轴旋转并为其设置动画吗？就像CSS、transform: rotateY( 90deg );或transform: rotateX( 90deg );一样。类似这样的仅用于fabricJS中的画布元素

浏览 5提问于2014-10-10得票数 0

2回答

是否可以使用css3旋转元素，但不能旋转元素的内容？

html、css

我有以下元素这个元素有浅蓝色的背景和一些填充。今天我遇到了一个小挑战:我知道我们可以旋转元素，但是它的内容也是旋转的。我试图实现的目标如下所示：因此，元素本身略有旋转，但其内容保持不变。这仅仅通过CSS3就可以实现吗？我试着尝试了几个嵌套元素

浏览 6提问于2013-05-21得票数 16

回答已采纳

2回答

材料设计图标css旋转不居中

css、css-animations、rotatetransform、google-material-icons

我试着用的图标来加载spiner，但是图标不仅仅是旋转的，它还稍微从中间移动。该元素位于一个绝对定位的包装器中，带有display: flex，水平和垂直居中。我在堆栈溢出中发现的不同样式，例如transfor

浏览 0提问于2018-03-27得票数 2

点击加载更多