为什么 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: info@johndoe.com">
    <input class="inputForm" type="text" name="email" placeholder="Email">               
</div>

Answer 1

我怀疑 transform-origin 不是您所需要的 - 它告诉系统任何转换发生的点 - 它是相对于它所在的元素，而不是任何 'owner'/parent/ancestor.

为了将伪元素定位在输入元素下方，此代码段为其指定了绝对位置以及左侧 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: info@johndoe.com">
  <input class="inputForm" type="text" name="email" placeholder="Email">
</div>

为什么 transform-origin: bottom 不起作用？

Why is transform-origin: bottom not working?

html

css

css-transforms