CSS Animation for hover rotate() - html

Question

I have a row in my page and I want the space in between the borders of the boxes along with keeping the boxes the same size on rotate. The animation is what I want it's that they squares are turning into rectangles and also I don't seem to know how to make them look as stand alone squares with the borders?
.statementnews {
border-style: solid;
border-width: 1px;
padding-left:2em;
/* width: 3vw; */
/* height: 3vh; */
/* justify-content: space-between; */
/* margin-right: 1em; */
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.statementnews p {
text-align: wrap;
margin-left:1em;
margin-right:1em;
background-color: #F0F0F0;
}
.statementnews:hover {
width: 1em;
height: 1em;
transform: rotate(360deg);
}
.mycolumn2 {
/* display: table-cell; */
margin-top: 2em;
/* width:100%; */
text-align: wrap;
}
.mycolumn2 div {
width:100%;
display: table-cell;
padding-top: 1em;
width: 25vw;
height: 3vh;
justify-content: space-between;
}
<section class="row sectionthird">
<h1 class="mycolumn_header">What they’ve said</h1>
<div class="mycolumn2" id="content2">
<div class="statementnews" id="content2">
<img src="https://i.imgur.com/19iZKat.png" alt="">
<p>“Manage has supercharged our team’s workflow. The ability to maintain
visibility on larger milestones at all times keeps everyone motivated.”</p>
<p>~Anisha Li</p>
</div>
<div class="statementnews" id="content2">
<img src="https://i.imgur.com/nywqgF7.png" alt="">
<p> “We have been able to cancel so many other subscriptions since using
Manage. There is no more cross-channel confusion and everyone is much
more focused.”</p>
<p>~Ali Bravo</p>
</div>
<div class="statementnews" id="content2">
<img src="https://i.imgur.com/TAe4vVN.png" alt="">
<p>“Manage allows us to provide structure and process. It keeps us organized
and focused. I can’t stop recommending them to everyone I talk to!”</p>
<p>~Richard Watts</p>
</div>
<div class="statementnews" id="content2">
<img src="https://i.imgur.com/dnBxz07.png" alt="">
<p>“Their software allows us to track, manage and collaborate on our projects
from anywhere. It keeps the whole team in-sync without being intrusive.”</p>
<p>~Shanai Gough</p>
</div>
</div>
</section>

Answer 1

This is the modified code which would give you the desired output:
html
<section class="row sectionthird">
<h1 class="mycolumn_header">What they’ve said</h1>
<div class="mycolumn2 " id="content2">
<div class="statementnews col">
<img src="https://i.imgur.com/19iZKat.png" alt="">
<p>“Manage has supercharged our team’s workflow. The ability to maintain
visibility on larger milestones at all times keeps everyone motivated.”</p>
<p>~Anisha Li</p>
</div>
<div class="statementnews col">
<img src="https://i.imgur.com/nywqgF7.png" alt="">
<p> “We have been able to cancel so many other subscriptions since using
Manage. There is no more cross-channel confusion and everyone is much
more focused.”</p>
<p>~Ali Bravo</p>
</div>
<div class="statementnews col">
<img src="https://i.imgur.com/TAe4vVN.png" alt="">
<p>“Manage allows us to provide structure and process. It keeps us organized
and focused. I can’t stop recommending them to everyone I talk to!”</p>
<p>~Richard Watts</p>
</div>
<div class="statementnews col">
<img src="https://i.imgur.com/dnBxz07.png" alt="">
<p>“Their software allows us to track, manage and collaborate on our projects
from anywhere. It keeps the whole team in-sync without being intrusive.”</p>
<p>~Shanai Gough</p>
</div>
</div>
</section>
and add this to your css
.col {
min-width:25vw;
}
Also, there was one error. The id of all the div of statement news were the same. In HTML, ids can't be the same. So I have removed the ids out of divs if you wish to add them, give them different naming(content1, content, content3 and so on).

Answer 2

Please note that the cards had the same id's. I've changed the CSS a bit hopefully this is what you meant
.statementnews {
width: 300px;
height: 300px;
padding-left: 30px;
box-shadow: 0 0 10px;
border-radius: 10px;
margin: 10px;
overflow: auto;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.statementnews p {
text-align: wrap;
margin-left: 1em;
margin-right: 1em;
background-color: #f0f0f0;
}
.statementnews:hover {
transform: rotate(360deg);
}
.mycolumn2 {
width: 100%;
margin-top: 2em;
display: flex;
flex-direction: row;
justify-content: center;
text-align: wrap;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=" />
<title></title>
</head>
<body>
<section class="row sectionthird">
<h1 class="mycolumn_header">What they’ve said</h1>
<div class="mycolumn2" id="content2">
<div class="statementnews" id="content_1">
<img src="https://i.imgur.com/19iZKat.png" alt="" />
<p>
“Manage has supercharged our team’s workflow. The ability to
maintain visibility on larger milestones at all times keeps
everyone motivated.”
</p>
<p>~Anisha Li</p>
</div>
<div class="statementnews" id="content_2">
<img src="https://i.imgur.com/nywqgF7.png" alt="" />
<p>
“We have been able to cancel so many other subscriptions since
using Manage. There is no more cross-channel confusion and
everyone is much more focused.”
</p>
<p>~Ali Bravo</p>
</div>
<div class="statementnews" id="content_3">
<img src="https://i.imgur.com/TAe4vVN.png" alt="" />
<p>
“Manage allows us to provide structure and process. It keeps us
organized and focused. I can’t stop recommending them to
everyone I talk to!”
</p>
<p>~Richard Watts</p>
</div>
<div class="statementnews" id="content_4">
<img src="https://i.imgur.com/dnBxz07.png" alt="" />
<p>
“Their software allows us to track, manage and collaborate on
our projects from anywhere. It keeps the whole team in-sync
without being intrusive.”
</p>
<p>~Shanai Gough</p>
</div>
</div>
</section>
</body>
</html>
</body>
</html>