Here is a link to the code with a working example: http://codepen.io/Bimbam/pen/rWPbpe

<ul class="cnap-items text-center"> <li class="adm-tax"> <p>НаТми на мСня</p> </li>

The question is why the block does not expand just to the right side, but mostly expanding to the left side, does it expand a little to the left and then comes back? With the help of transform-origin I chose the coordinate 0% for Ix, 50% for the game, with the help of scaleX I stretch to the right side, but something does not work out exactly as I would like. And I would like it to be linear, expanded to the right side ...

1 answer 1

Slightly corrected code:

 $(".adm-tax").click(function(event) { $(".adm-tax").css({ '-webkit-transform': 'scaleX(2.1)', ' transform': 'scaleX(2.1)' }); }); 
 .cnap-items { float: left; margin-top: 15px; } .cnap-items li { margin-left: 50px; text-align: center; width: 400px; height: 60px; background-color: #009852; margin-top: 10px; color: white; padding-top: 20px; cursor: pointer; border-left: 3px solid #036136; } .adm-tax { transform-origin: 0% 0%; transition: all 5s linear; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="cnap-items text-center"> <li class="adm-tax"><p>НаТми на мСня</p></li> </ul>