Всем привет, не могу понять, как внутри блока у которого прописано display:flex сделать что бы внутренний блок плавно открывался во все стороны?
Я сделал с помощью scale, пропорциональное увеличение блока, например в спокойном состоянии у блока высота и ширина 50 пикселей и scale (1,1) а при наведении (2,2), таким образом блок при наведении увеличивается в два раза, если поставить (3,3) то будет в три раза больше, и тд.
<div class="block">
html,
body {
height: 100px;
width: 600px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.block{
width:50px;
height:50px;
background:red;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 550ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 550ms;
}
.block:hover {
-webkit-transform: scale(2,2);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 550ms;
-moz-transform: scale(2,2);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 550ms;
}