CODEWITHSUNDEEP
cssrotation
mcnesium
mcnesium

Reputation: 1513

Rotate inline elements using CSS other than their center?

I am trying to rotate an asterisk around its center using CSS3 features. To point to the character, I wrapped it into a span-element, which is an inline element. Adding the corresponding CSS to it, the span starts to spin, but it does so around the center of the character.

The asterisk is not in the center of the charater in most fonts, so it kind of bowls around but does not really spin.

To correct this, there is the (prefixed) transform-origin: x y; property, but here comes the question: is it any possible to address other x and y to an inline element than center? Whatever I set it to, the character keeps rotating around its center. Here's the fiddle

Upvotes: 0

Views: 875

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105853

you need to set display to inline-block for the <span>, so transform can be applied through all browser that understands it.

You can resize height of <span>, to reduce gap under this peticular symbol/letter used.

Transform-origin defaut is center, you can keep this way and even skip the rule :

DEMO

CSS trimed from vendor prefix

.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;
}

To add valid vendor prefix , you could relay on a script. like prefixfree.js or else.

For instance: today: ff doesn't need prefix for animation, opera can take -webkit- prefix, and so on. Evolution of browser is fast and keeping theses extra prefixed rules just puts a big mess in CSS and time to time becomes more & more useless.

Upvotes: 1

Related Questions