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

Question

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

星号在大多数字体中都不在字符的中心，所以它有点像碗一样，但并没有真正旋转。

要纠正这个问题，有(前缀)transform-origin: x y; 属性，但问题来了:是否有可能将其他 x 和 y 定位到内联元素而不是中心？无论我将其设置为什么， Angular 色都会围绕其中心旋转。 Here's the fiddle

Answer 1

你需要设置display至 inline-block对于 <span> , 因此转换可以通过所有理解它的浏览器应用。

您可以调整大小 height的 <span> , 以减少使用的特殊符号/字母下的间隙。

Transform-origin默认是中心，你可以保持这种方式甚至跳过规则:

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 变得一团糟，有时会变得越来越无用。