Using tailwind css, how to spin an absolutely positioned and centered element?(使用顺风css,如何旋转一个绝对定位和居中的元素?)
转载作者:bug小助手更新时间:2023-10-25 22:52:17324
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); } }
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:
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.
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.
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
我是一名优秀的程序员,十分优秀!