Why isn't this text rotated?

Question

I've tried quite a few variants with no luck. What am I missing?

#menu {
 position: absolute;
 width: 50px;
 height: 250px;
 top: 15px;
 left: 0;
 background-color: #ee2e24;
 color: white;
}
#menu span {
 transform: rotate(90deg);
 transform-origin: left top 0;
}

<div id="menu"><span>MAIN MENU</span></div>

See http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements — Nenad Vracar, May 09 '17 at 15:31

Chiller · Answer 1 · 2017-05-09T15:32:44.093

4

You need to add display:inline-block; to the span

#menu {
  position: absolute;
  width: 50px;
  height: 250px;
  top: 15px;
  left: 0;
  background-color: #ee2e24;
  color: white;
}

span {
  display: inline-block;
  transform: rotate(90deg);
  /*transform-origin: left top 0;*/
  margin-top: 10px;
}

<div id="menu"><span>MAIN MENU</span></div>

edited May 09 '17 at 15:32

answered May 09 '17 at 15:29

Chiller

9,520
2
28
38

padding/margin? – mplungjan May 09 '17 at 15:31
@mplungjan you can use padding and margin :) – Chiller May 09 '17 at 15:33

score 1 · Accepted Answer · answered May 09 '17 at 15:32

1

Try text-orientation.

#menu {
 position: absolute;
 width: 50px;
 height: 250px;
 top: 15px;
 left: 0;
 background-color: #ee2e24;
 color: white;
}
#menu span {
 writing-mode: vertical-rl;
  text-orientation: sideways;
}

<div id="menu"><span>MAIN MENU</span></div>

answered May 09 '17 at 15:32

Dexter0015

1,029
9
14

This cured my cancer. How compatible is it? – May 09 '17 at 15:40
Not so much i'm afraid (it seems to be only spported by Firefox at the moment). Sorry. – Dexter0015 May 09 '17 at 15:44
But it seems that you should be abel to do the same according to this article : https://davidwalsh.name/css-vertical-text – Dexter0015 May 09 '17 at 15:44
@Scott https://developer.mozilla.org/de/docs/Web/CSS/text-orientation#Browser_compatibility <<- Seems to be a bit outdated: Here is more info in the caniuse issue queue: https://github.com/Fyrd/caniuse/issues/2077 – yunzen May 09 '17 at 15:45
It works in Chrome/Webkit which is all I need. Thank you! – May 09 '17 at 15:47
"This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes." From https://developer.mozilla.org/de/docs/Web/CSS/text-orientation#Quick_Links – yunzen May 09 '17 at 15:49

yunzen · Answer 3 · 2017-05-09T15:38:10.723

You cannot use LESS or SCSS in the SA snippets. Just pure CSS, so move span out of #menu
span is an inline element. You cannot transform inline elements. Make span a block element with display: block

#menu {
  position: absolute;
  width: 50px;
  height: 250px;
  top: 15px;
  left: 0;
  background-color: #ee2e24;
  color: white;
}
#menu span {
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: 0% 0%;
  display: block;
}

<div id="menu"><span>MAIN MENU</span></div>

Why isn't this text rotated?

3 Answers3