css - CSS动画问题：拜托看下这个代码，是translate影响的吗，影响的transform-origin吗，为什么？
帮忙看下这个代码，主要问题在于load-box里，我用绝对定位后left与translateX结合让这个盒子在父盒子水平居中，这个动画的效果应该使这个盒子自己转一圈，看倒的效果就是没有变化，但实际上使load-box这个子盒子移动了，是因为转换中心改变了吗，这是为什么
<style> .load { position: relative; width: 250px; height: 250px; background-color: rgba(0, 0, 0, .25); border-radius: 125px; margin: 50px auto; } .load-box { position: absolute; left: 50%; transform: translateX(-50%); width: 100px; height: 100px; background-color: pink; border-radius: 50px; animation: circle-rotate 1s linear forwards; } @keyframes circle-rotate { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } }</style><body> <div class="load"> <div class="load-box"></div> <div class="load-box"></div> <div class="load-box"></div> <div class="load-box"></div> <div class="load-box"></div> <div class="load-box"></div> <div class="load-box"></div> <div class="load-box"></div> </div>我试了下问题出在translateX上，注释掉translateX这个盒子就是本身旋转360度，但加上就不是了
共有1个答案
当circle-rotate中的transform生效的时候，.load-box中的transform就被覆盖了。
@keyframes circle-rotate { 0% { transform: translateX(-50%) rotateZ(0deg); } 100% { transform: translateX(-50%) rotateZ(360deg); } }-
如图：右边红色的提示 怎么会这样呢？（头大~） 当父盒子背景色为白色时‘正常’，或者把select的i标签的过渡给取消也就‘正常’了 可利用下面代码测试
-
问题内容： 我知道CSS选择器具有最高的优先级（即< ）。 我还知道，如果事物具有相同的特异性，那么最后一个调用的语句将具有优先权： HTML类在DOM元素上的排序是否会影响语句优先级？ 问题答案： 我不得不不同意乔恩和沃森的回答，因为… 是的， 可以 （取决于声明） 您的问题是： CSS类在DOM元素上的排序是否会影响语句优先级？ 哪个确实取决于所讨论的语句。 HTML排序通常不重要 当直接调用
-
问题内容： 我正在使用Twitter Bootstrap，并且有Google地图。 地图上的图像（例如标记）正由Bootstrap中的CSS倾斜。 在Bootstrap CSS中有： 当我使用Firebug 禁用该属性时，标记图像会正常显示。如何防止Bootstrap CSS影响Google地图图像？ 问题答案： 对于Bootstrap 2.0，这似乎可以解决问题：
-
问题内容： 我正在寻找一种解决悬停问题的方法。 现在，图像和图层这两个类都有边框。两者的正常和悬停都有不同的颜色。有没有办法做到这一点，所以如果我将图层类悬停，则图层和图像类的悬停边框颜色都处于活动状态？反之亦然？ 问题答案： 您不需要JavaScript。 一些CSS可以做到。这是一个例子：
-
如果执行win_obj.scrollTo(0,win_obj.scrollTop+100);能正确跳到指定位置，但是上面的样式修改就不会成功，如果不执行上面那句样式就可以正常修改，想知道如何能即修改样式又正常跳转位置
-
https://play.vuejs.org/#eNp1UEFOwzAQ/MrKSAgOJEaoEjKhEt9AuaS2S... 这是代码地址可以看到异常效果，将 position: relative; 注释就正常了，这是什么原因呢？有什么方法可以解决吗？ // 谷歌浏览器