CSS Анимация для поворота при наведении () - PullRequest
Новая
       89

CSS Анимация для поворота при наведении ()

0 голосов
/ 13 июля 2020

У меня есть строка на моей странице, и я хочу, чтобы между границами ящиков оставалось пространство, и чтобы ящики оставались одинакового размера при повороте. Я хочу анимацию, чтобы квадраты превращались в прямоугольники, и к тому же я не знаю, как заставить их выглядеть как отдельные квадраты с границами? 

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

Ответы [ 2 ]

0 голосов
/ 13 июля 2020

Обратите внимание, что у карт одинаковые идентификаторы. Я немного изменил 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>
0 голосов
/ 13 июля 2020

Это модифицированный код, который даст вам желаемый результат:

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;
}

Также была одна ошибка. Идентификаторы всех дивизионов новостей были одинаковыми. В HTML идентификаторы не могут быть одинаковыми. Поэтому я удалил идентификаторы из div-ов, если вы sh добавляете их, дайте им другое имя (content1, content, content3 и т. Д.).

...