CSS Animation 用於 hover 旋轉（）

Question

我的頁面中有一行，我希望在框的邊框之間留出空間，同時在旋轉時保持框的大小相同。 animation 是我想要的，因為它們的正方形變成了矩形，而且我似乎不知道如何讓它們看起來像帶邊框的獨立正方形？

 .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

這是修改后的代碼，它將為您提供所需的 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>

並將其添加到您的 css

.col {
  min-width:25vw;
}

此外，還有一個錯誤。 statement news的所有div的id都是一樣的。 在 HTML 中，id 不能相同。 所以如果你想添加它們，我已經從 div 中刪除了 id，給它們不同的命名（content1、content、content3 等等）。

Answer 2

請注意，這些卡具有相同的 ID。 我已經稍微改變了 CSS 希望這就是你的意思

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