Html CSS线条到中心的过渡宽度

我正在学习CSS转换，并试图使3条偏移线的宽度减小到各自的中心点。现在，宽度变换发生在左侧，而不是中心

这是你的电话号码

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

守则：

const div=document.getElementById（'line'））
div.addEventListener（'click'，function（）{
var className=div.getAttribute（“类”）；
if（className！=“打开”）{
div.className='open'；
}否则{
div.className=''；
}
})

#行{
宽度：250px；
高度：250px；
位置：绝对位置；
光标：指针；
转换：.25秒轻松输入输出；
}
#线路跨度{
边框：1px纯黑；
显示：块；
位置：绝对位置；
高度：15px；
宽度：200px；
背景：#d3531a；
边界半径：9px；
过渡：宽度。25秒易进易出；
}
#行跨度：第n个子项（1）{
顶部：0px；
}
#行跨度：第n个子项（2）{
顶部：18px；
左：18px；
}
#行跨度：第n个子项（3）{
顶部：36px；
左：36px；
}
#开口跨度{
宽度：16px；
}

使用

transform:scale（）

而不是

width

，默认情况下，

变换原点将是中心


const div=document.getElementById（'line'））
div.addEventListener（'click'，function（）{
var className=div.getAttribute（“类”）；
if（className！=“打开”）{
div.className='open'；
}否则{
div.className=''；
}
})
#行{
宽度：250px；
高度：250px；
位置：绝对位置；
光标：指针；
转换：.25秒轻松输入输出；
}
#线路跨度{
边框：1px纯黑；
显示：块；
位置：绝对位置；
高度：15px；
宽度：200px；
背景：#d3531a；
边界半径：9px；
转换：转换。25秒易进易出；
}
#行跨度：第n个子项（1）{
顶部：0px；
}
#行跨度：第n个子项（2）{
顶部：18px；
左：18px；
}
#行跨度：第n个子项（3）{
顶部：36px；
左：36px；
}
#开口跨度{
变换：scaleX（0）；
}

您的SCS中存在语法错误，因此无法显示您的跨度。缺少分号。一定要检查你的演示作品之前张贴。理想情况下，您不会发布scs，只发布呈现的CSS。这很奇怪，跨度出现在fiddle中，而不是缺少分号，因此SCS无法编译。很好的捕获谢谢，我更新了它并修复了此处的代码段。我发现为了使用
transform:scaleX（0）transform:scaleX（1）否则动画会导致该元素突然消失”。