求助！！！css动画中transform如何指定开始位置而不是偏移量

求助！！！！CSS transform 如何指定开始位置，而不是轴上的偏移量

```html
<transition
    name="dialog-fade"
    ref="dialogTransition"
    @after-enter="afterEnter"
    @after-leave="afterLeave"
    enter-active-class="animate__animated my__fadeInBottomLeft"
    leave-active-class="animate__animated animate__fadeOutBottomLeft"
  >
    <div>.......<div/>
</transition>

```css
@-webkit-keyframes myfadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes myfadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.my__fadeInBottomLeft{
  -webkit-animation-name: myfadeInLeft;
  animation-name: myfadeInLeft;
}
translate3d指定不论是百分比或者是px都是指的在轴上的偏移量，无法指定从我想要的位置开始。
我的解答思路和尝试过的方法
可以指定位置开始动画，比如从距离屏幕左侧100px、屏幕底部50px,开始动画，哪位大佬可以指点一二感激不尽！！！！！！！

transform-origin ？