为什么transform-origin: bottom不工作?

Question

我想让一行出现在"聚焦时的输入框。由于某种原因，transform-origin "left"(也就是说，如果我把它改成"right"它将从右侧显示，但带有"left"它从左边开始显示，但'bottom'不起作用，它一直出现在顶部。

.wrap-input{
width: 100%;
position: relative;
border-bottom: 2px solid #adadad;
height: 49px;
}
.inputForm {
font-size: 15px;
color: #555555;
line-height: 1.2;
display: block;
width: 100%;
height: 45px;
padding: 0 5px;
outline: none;
border: none;
}
.wrap-input::before{
content: '';
height: 2px;
background: linear-gradient(90deg, rgba(128,0,0,1) 15%, rgba(238,174,150,1) 49%, rgba(128,0,0,1) 85%);
display: block;
transform: scale(0, 1);
transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
transform-origin: left bottom;/*this line is problem*/
}
.wrap-input:hover::before {
transform: scale(1, 1)
}

<div class="wrap-input" data-validate="Valid email is: [e-mail]">
<input class="inputForm" type="text" name="email" placeholder="Email">               
</div>

Answer 1

我怀疑transform-origin不是你需要的-它告诉系统任何转换发生的点-它是相对于它所在的元素，而不是任何'所有者'/父/祖先。

为了将伪元素定位在输入元素下，这段代码给了它绝对位置和左0和下0的位置——这些都是相对于实际div本身的。

.wrap-input {
width: 100%;
position: relative;
border-bottom: 2px solid #adadad;
height: 49px;
}
.inputForm {
font-size: 15px;
color: #555555;
line-height: 1.2;
display: block;
width: 100%;
height: 45px;
padding: 0 5px;
outline: none;
border: none;
}
.wrap-input::before {
content: '';
height: 2px;
background: linear-gradient(90deg, rgba(128, 0, 0, 1) 15%, rgba(238, 174, 150, 1) 49%, rgba(128, 0, 0, 1) 85%);
display: block;
transform: scale(0, 1);
transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
transform-origin: left center;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.wrap-input:hover::before {
transform: scale(1, 1)
}

<div class="wrap-input" data-validate="Valid email is: [e-mail]">
<input class="inputForm" type="text" name="email" placeholder="Email">
</div>