CSS过渡到中心的宽度

Question

我正在学习CSS过渡，我试图让3条偏移线将宽度减小到各自的中心点。现在，宽度过渡发生在左侧而不是中心。

这是Fiddle。

如何将每条线的宽度转换为各自的中心点？

代码：

＆＃13;

＆＃13;

const div = document.getElementById('lines')

div.addEventListener('click', function() {
	var className = div.getAttribute("class");

	if (className != 'open') {
		div.className = 'open';
	} else {
		div.className = '';
	}
})

＆＃13;

#lines {
  width: 250px;
  height: 250px;
  position: absolute;
  cursor: pointer;
  transition: .25s ease-in-out;
}
#lines span {
  border: 1px solid black;
  display: block;
  position: absolute;
  height: 15px;
  width: 200px;
  background: #d3531a;
  border-radius: 9px;
  transition: width .25s ease-in-out;
}
#lines span:nth-child(1) {
  top: 0px;
}
#lines span:nth-child(2) {
  top: 18px;
  left: 18px;
}
#lines span:nth-child(3) {
  top: 36px;
  left: 36px;
}

#lines.open span {
  width: 16px;
}

＆＃13;

<div id="lines">
  <span></span>
  <span></span>
  <span></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

默认情况下，使用transform: scale()代替width，transform-origin将成为中心。

＆＃13;

＆＃13;

const div = document.getElementById('lines')

div.addEventListener('click', function() {
	var className = div.getAttribute("class");

	if (className != 'open') {
		div.className = 'open';
	} else {
		div.className = '';
	}
})

＆＃13;

#lines {
  width: 250px;
  height: 250px;
  position: absolute;
  cursor: pointer;
  transition: .25s ease-in-out;
}
#lines span {
  border: 1px solid black;
  display: block;
  position: absolute;
  height: 15px;
  width: 200px;
  background: #d3531a;
  border-radius: 9px;
  transition: transform .25s ease-in-out;
}
#lines span:nth-child(1) {
  top: 0px;
}
#lines span:nth-child(2) {
  top: 18px;
  left: 18px;
}
#lines span:nth-child(3) {
  top: 36px;
  left: 36px;
}

#lines.open span {
  transform: scaleX(0);
}

＆＃13;

<div id="lines">
  <span></span>
  <span></span>
  <span></span>
</div>

＆＃13;

＆＃13;

＆＃13;