Javascript-форум - transform-origin проблемы с вращением дива

Добрый день уважаемый. Вот столкнулся с проблемой не понимания свойства. Есть такой пример

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
#field {
		position: relative;
		width: 400px;
		height: 400px;
		margin-left: 10%;
		margin-top: 10%;
		/*background-color: yellow;*/
		border: 5px solid black;
}

.block {

		position: relative;
		width: 3px;
		border-width: 220px 20px 0;
		border-style: solid;
		border-color: rgba(255, 0, 0, 0.5)transparent;
}
.block:before {
		content: "";
		position: absolute;
		height: 0;
		width: 0;
		top: -260px;
		left: -20px;
		border-width: 0 21.5px 40px;
		border-style: solid;
		border-color: transparent transparent rgba(0, 0, 255, 0.5);
		
}
	#fifth {position: absolute;
		top: 15%;
		left: 50%;
		
		height: 220px;
		width: auto;


		border: 1px solid black;

		transform-origin: center 220px;
}



#fifth:hover{
	animation: skew 1s linear;
	animation-fill-mode: forwards;
}

@keyframes skew {
	0%{transform: skewX(0deg);}
	100%{transform: skewX(60deg);}
}

</style>
<body>
<div id="field">
	<div id="fifth">
        <div class="block">5</div>
    </div>
</div>
</body>
</html>

Согласно моего понимания точку вращения я задал снизу под блоком.

Отчего идет деформация ? И как сделать так что б было как на рисунке 3 ?