为什么不旋转此文本？ [复制]

Question

我尝试了很多变体，但都没有运气。我错过了什么？

#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>

Answer 1

你需要将display:inline-block;添加到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>

Answer 2

试试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>

Answer 3

1. 您不能在 SA sn-ps 中使用 LESS 或 SCSS。只是纯 CSS，所以将 span 移出 #menu
2. span 是一个内联元素。您不能转换内联元素。使用 display: block 使 span 成为一个块元素

#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>