Question

我正在尝试使用CSS3功能在其中心周围旋转星号。为了指向该角色，我将其包装成span - 元素，这是一个内联元素。将相应的CSS添加到其中，跨度开始旋转，但它围绕角色的中心进行旋转。

在大多数字体中，星号不在字符的中心位置，所以它有点周围但不会真正旋转。

要纠正这个问题，有（带前缀的）transform-origin: x y;属性，但问题是：是否有可能将其他x和y作为内联元素而不是中心？无论我将它设置为什么，角色都会围绕它的中心旋转。 Here's the fiddle

Answer 1

您需要为display设置inline-block到<span>，因此可以通过所有了解它的浏览器应用转换。

您可以调整height <span>的大小，以缩小所使用的此符号/字母下的差距。

Transform-origin defaut是中心，您可以保持这种方式甚至跳过规则：

<强> DEMO

CSS来自供应商前缀

.rotating {
    font-size: 3rem;
    background-color: red;
    height:2.5rem;
    display:inline-block;
}
@keyframes rotate {
  from {transform:rotate(0deg); }
  to {transform:rotate(360deg); }
}

.rotating {
transform-origin: center center;
animation-name: rotate;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

要添加有效的供应商前缀，您可以在脚本上进行中继。比如prefixfree.js或者。

例如： 今天：ff不需要动画前缀，opera可以使用-webkit-前缀，依此类推。浏览器的发展速度很快，并且保留这些额外的前缀规则只会给CSS带来很大的麻烦，并且时间会变得更加频繁。更无用。

使用除中心以外的CSS旋转内联元素？

1 个答案: