为什么这个文字没有旋转？

Question

我尝试了很多没有运气的变种。我错过了什么？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要将display:inline-block;添加到范围

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试text-orientation。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

1. 您不能在SA片段中使用LESS或SCSS。只是纯CSS，所以将span移出#menu
2. span是内联元素。您无法转换内联元素。使用display: block
使span成为块元素
＆＃13;
＆＃13;
#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;
}
＆＃13;
<div id="menu"><span>MAIN MENU</span></div>
＆＃13;
＆＃13;
＆＃13;