Добрый день уважаемый. Вот столкнулся с проблемой не понимания свойства. Есть такой пример
<!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 ?