CSS Animation for hover rotate()

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>

score 0 · Accepted Answer · edited Jul 12 '20 at 22:39

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).

score 0 · Answer 2 · answered Jul 12 '20 at 22:45

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>

CSS Animation for hover rotate()

2 Answers2