dinodp

Отвечу сам на свой вопрос. Нужно выбрать настройках Pivot Point (Точка опоры) - Active Element. Тогда можно производить выравнивание через S - Y/X/Z - 0 по активной точке.

Другие же настройки нам не особо нужны, т.к. они выравнивают относительно какой-то точки при этом сохраняется деформация объекта.

Мой любимый фокус https://jsfiddle.net/Ankhena/56Ltxdkq/

не знаю как с помощью бордера, но можно реализовать с помощью абсолютно расположенного єлемента. Примерно так :

.element {
	padding: 30px;
	background: #eee;
	position: relative;
	&:after {
		position: absolute;
		content:"";
		width: 0;
		height: 2px;
		background: red;
		bottom: 0;
		right: 0;
		left: 0;
		transition: all .5s;   
	} 

	&:hover {
		&:after {
			width: 100%; 
		}
	}
}

вот как это выглядит
https://jsfiddle.net/ionenkovladimir/qb5m057o/