0

I have a dummy span:

<span></span>

I want it rotated on hover:

@font-face { font-family: "ionicons"; src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1"); src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg"); font-weight: normal; font-style: normal; }

span {
  display: block;
}

span:after {
  content: '\f125';
  font-family: 'ionicons';
}

span:hover {
  transform: rotate(90deg);
}

However nothing seems to happen. Why is that?

Demo

@font-face {
  font-family: "ionicons";
  src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1");
  src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix") format("embedded-opentype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1") format("truetype"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1") format("woff"), url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons") format("svg");
  font-weight: normal;
  font-style: normal;
}

span {
  display: block;
}

span:after {
  content: '\f125';
  font-family: 'ionicons';
}

span:hover {
  transform: rotate(90deg);
}
<span></span>

How do I rotate the span around its center point?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
adder
  • 3,512
  • 1
  • 16
  • 28
  • Try with -90deg and you'll understand, to fix it make it inline or lower it's width – Rainbow Nov 08 '19 at 18:54
  • You need a transition CSS rule to see the animation. Added BG color to this fiddle so you can see the animation (glyph goes off-screen w/ animation): https://jsfiddle.net/6kv8L7qd/ – circusdei Nov 08 '19 at 18:56
  • I see. Well, how do I rotate the span around its center point? – adder Nov 08 '19 at 18:59
  • transform-origin: center center; (https://jsfiddle.net/6kv8L7qd/1/) Google works too ;) – circusdei Nov 08 '19 at 19:02
  • To rotate around the center point, use `transform-origin: center;` See https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin – Ted Whitehead Nov 08 '19 at 19:02
  • I don’t think this is a dup of that particular question since the `` is set to `display: block` in the example. – Ted Whitehead Nov 08 '19 at 19:03
  • use `inline-block` and not block – Temani Afif Nov 08 '19 at 19:08
  • 1
    @TedWhitehead center is the default value and it's the issue here because the center of a block element is the center of the screen since it's by default 100% width – Temani Afif Nov 08 '19 at 19:09

0 Answers0