Как можно масштабировать только в положительном направлении x?

Question

Я новичок в анимации. И я использую scalex() для анимации области моего div, но которые производят масштабирование в обоих направлениях onclick на соответствующий div.I'm добавил фрагмент ниже.

document.getElementById("match").addEventListener("click",function(){ 
 
    document.getElementById("match").classList.add("anim"); 
 
});

#match{ 
 
height:100px; 
 
    width:100px; 
 
    background-color:red; 
 
    } 
 

 
.anim{ 
 
    animation : scale 5s linear 1; 
 
} 
 

 
@keyframes scale{ 
 
    0%{ 
 
     transform: scaleX(1); 
 
    } 
 
    50%{ 
 
     transform: scaleX(1.5); 
 
    } 
 
    100%{ 
 
     transform: scaleX(2); 
 
    } 
 
}

<div id="match"> </div>

На приведенном выше коде я пытаюсь достичь div области, которая масштабирования только на положительном x-direction.How добиться?

Answer 1

Установите значение transform-origin как left так, чтобы левый край ящика оставался фиксированным.

document.getElementById("match").addEventListener("click", function() { 
 
    document.getElementById("match").classList.add("anim"); 
 
});

#match { 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
} 
 
.anim { 
 
    animation: scale 5s linear 1; 
 
    transform-origin: left; 
 
} 
 
@keyframes scale { 
 
    0% { 
 
    transform: scaleX(1); 
 
    } 
 
    50% { 
 
    transform: scaleX(1.5); 
 
    } 
 
    100% { 
 
    transform: scaleX(2); 
 
    } 
 
}

<div id="match"></div>