gpt4 book ai didi

Using tailwind css, how to spin an absolutely positioned and centered element?(使用顺风css,如何旋转一个绝对定位和居中的元素?)

转载 作者:bug小助手 更新时间:2023-10-25 22:46:05 26 4
gpt4 key购买 nike



Using tailwind css, I can center an absolutely positioned element in its relative container: <svg class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">...</svg>

使用顺风css,我可以使绝对定位的元素在其相对容器中居中: ...


Using tailwind css, I can make an absolutely positoined element spin: <svg class="absolute animate-spin">...</svg>

使用顺风css,我可以使绝对正向元素旋转: ...


But when I try to center an absolutely positioned spinning element, <svg class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 animate-spin">...</svg>, instead of spinning, the non-spinning element just moves down and to the right at a -45deg angle.

但是,当我尝试将一个绝对定位的旋转元素 ... 居中时,非旋转元素只是以-45度的角度向下和向右移动。


What am I doing wrong?

我做错了什么?


更多回答
优秀答案推荐

tailwind uses this css:

顺风使用的是这样的css:


animate-spin:   animation: spin 1s linear infinite;

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

and also

而且还


-translate-x-1/2    transform: translateX(-50%);
-translate-y-1/2 transform: translateY(-50%);

Solution: I think this behavior is because spin and translate both manipulate transform property.
so you can wrap the svg in a div and set position related classes to that div and for svg only use animation class:

解决方案:我认为这种行为是因为旋转和平移都操纵变换属性。因此,您可以将SVG包装在div中,并将与位置相关的类设置为该div,并且对于SVG,仅使用动画类:


<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<svg class="animate-spin">...</svg>
</div>


As I understand, when you use both translation classes, i.e., -translate-x-1/2 and -translate-y-1/2 with the class animate-spin, it is very likely to cause this behavior.

据我所知,当您将两个转换类(即-Translate-x-1/2和-Translate-y-1/2)与类Animate-Spin一起使用时,很可能会导致此行为。


Solution: A solution approach would be to also use transform class along with the above 3 mentioned classes.

解决方案:一种解决方案是将Transform类与上面提到的3个类一起使用。


Reason: By adding transform class, it ensures that the two translational classes are grouped for performing transformation rather than changing position.

原因:通过添加转换类,确保将两个转换类组合在一起执行转换,而不是改变位置。


In this way, the element will have the properties of both center and spin as per your requirement.

这样,元素将根据您的要求同时具有中心和旋转属性。



'-translate-x-1/2 -translate-y-1/2' include an associated 'transform', but 'animate-spin' also includes a 'transform' within a @keyframe.

‘-平移-x-1/2-平移-y-1/2’包括关联的‘Transform’,但‘Animate-Spin’还包括@KeyFrame内的‘Transform’。


It seems that these two transforms collide without being merged, possibly depending on the order of the keywords.

这两个转换似乎冲突而不合并,这可能取决于关键字的顺序。


My workaround: a wrapper element

我的解决方法:包装器元素


<div class="absolute left-1/2 right-1/2 -transform-x-1/2 -transform-y-1/2">
<svg class="aninate-spin">...</svg>
</div>


更多回答

Came to this same conclusion and answered myself without refreshing and seeing your answer. Accepted your answer.Thank you.

得出了同样的结论,回答了我自己,没有刷新,也没有看到你的回答。接受你的回答。谢谢。

Thank you. Sadly, after adding "transform" I continue to observe the same unexpected result.

谢谢。遗憾的是,在添加了“转换”之后,我继续观察到同样的意外结果。

If this is not working try adding "left-1/2" and "top-1/2" to center the element and then add the "transform" and "animate-spin" classes. If this doesn't work as per please try re-checking the Tailwind CSS setup so as to avoid any conflicts in CSS code

如果这不起作用,尝试添加“Left-1/2”和“top-1/2”来居中元素,然后添加“Transform”和“Animate-Spin”类。如果这不能正常工作,请尝试重新检查TailWind的css设置,以避免在css代码中发生冲突

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com