logo标签列表

CSS旋转信息卡片在闪烁。

htmlcss
3

我有一些纯HTML/CSS代码需要解决 -

当鼠标悬停在卡片上时，应该会出现翻转效果。 这个效果是有效的，但如果你在太快或奇怪的角度上运行它，它会产生一种“卡顿”的感觉。 我正在尝试修复它，使其无论如何都能无缝。

似乎问题发生在光标超出卡片容器范围时，因为盒子正在收缩和再次扩展以创建翻转效果。

有什么办法可以解决吗？

https://codepen.io/mttmrn/pen/zgZKjj

HTML:

<body>

  <!-- 
            This is where the cards start
        -->
  <div class="card-container">
    <div class="card">
      <div class="card-front">
        <img src="./img/cool-background.png" alt="background" class="card-img">
        <ul class="card-text">
          <li>React | Redux</li>
          <li>NodeJS</li>
          <li>JavaScript</li>
        </ul>
      </div>
      <div class="card-back">
        <ul class="card-text">
          <li>hello</li>
          <li>twice</li>
        </ul>
      </div>


CSS:

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  background: rgb(250, 224, 30);
}

.card-container {
  display: flex;
  margin-top: 12%;
  margin-left: 15%;
  margin-right: 15%;
  justify-content: space-evenly;
  text-align: center;
  flex-wrap: wrap;
}

.card {
  width: 275px;
  height: 350px;
  border: 4px solid black;
  margin-top: 50px;
  border-radius: 2px;
  -webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.75);
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.card-back {
  background: wheat;
}

.card-text {
  list-style: none;
  margin: 20px 50px 0px 50px;
  line-height: 40px;
}

.card-text li:not(:last-child) {
  border-bottom: 1px solid #0004;
}

.card-img {
  height: 150px;
  width: 268px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.card-front:nth-child(1) {
  animation: fadeIn 1.5s 0.3s backwards;
}

.card-front:nth-child(2) {
  animation: fadeIn 1.5s 0.6s backwards;
}
.card-front:nth-child(3) {
  animation: fadeIn 1.5s 0.9s backwards;
}
.card-front:nth-child(4) {
  animation: fadeIn 2s 1.2s backwards;
}
.card-front:nth-child(5) {
  animation: fadeIn 2s 1.5s backwards;
}
.card-front:nth-child(6) {
  animation: fadeIn 2s 1.8s backwards;
}

鼠标悬停时动画应平滑进行，并且在光标离开卡片之前应保持翻转状态。
有许多解决方案可用。首先，您可以为卡片创建一个包装器并应用悬停规则。然后在悬停时旋转内部卡片。 - lucifer63
2个回答
3
感谢上传这支笔。我为您查看了一下，并在以下示例中添加了一个示例（仅为示例目的减少了混乱，只使用了1张卡片）： 

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  background: rgb(250, 224, 30);
}

.card-container {
  display: flex;
  margin-left: 15%;
  margin-right: 15%;
  justify-content: space-evenly;
  text-align: center;
  flex-wrap: wrap;
}

.box {
  perspective: 1000px;
}

.card {
  width: 275px;
  height: 350px;
  border: 4px solid black;
  margin-top: 50px;
  border-radius: 2px;
  -webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.75);
  transform-style: preserve-3d;
  transition: 1s ease;
}

.box:hover .card {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-back {
  background: wheat;
  transform: rotateY(180deg);
}

.card-text {
  list-style: none;
  margin: 20px 50px 0px 50px;
  line-height: 40px;
}

.card-text li:not(:last-child) {
  border-bottom: 1px solid #0004;
}

.card-img {
  height: 150px;
  width: 268px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.card-front:nth-child(1) {
  animation: fadeIn 1.5s 0.3s backwards;
}

.card-front:nth-child(2) {
  animation: fadeIn 1.5s 0.6s backwards;
}
.card-front:nth-child(3) {
  animation: fadeIn 1.5s 0.9s backwards;
}
.card-front:nth-child(4) {
  animation: fadeIn 2s 1.2s backwards;
}
.card-front:nth-child(5) {
  animation: fadeIn 2s 1.5s backwards;
}
.card-front:nth-child(6) {
  animation: fadeIn 2s 1.8s backwards;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script defer src="https://use.fontawesome.com/releases/v5.9.0/js/all.js" integrity="sha384-7Gk1S6elg570RSJJxILsRiq8o0CO99g1zjfOISrqjFUCjxHDn3TmaWoWOqt6eswF" crossorigin="anonymous">
  </script>
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./style.css" />
</head>

<body>

  <!-- 
            This is where the cards start
        -->
  <div class="card-container">
    <div class="box">
    <div class="card">
      <div class="card-front">
        <img src="./img/cool-background.png" alt="background" class="card-img">
        <ul class="card-text">
          <li>React | Redux</li>
          <li>NodeJS</li>
          <li>JavaScript</li>
        </ul>
      </div>
      <div class="card-back">
        <ul class="card-text">
          <li>hello</li>
          <li>twice</li>
        </ul>
      </div>
    </div>
    </div>

  </div>
  <!--
            Card End
        -->
</body>

</html>

本质上，我添加了一个盒子包装器，并将变换规则添加到其中，同时清理前端和后端类的一些共享代码，以避免卡片类之间的变换“冲突”。我还将查看变换代码并加入一些 Webkit 片段，如：

transform: rotateY(180deg);
-webkit-transform: ...

如果您有任何不理解的地方或需要进一步帮助，请告诉我。

这个答案可以通过将你的代码笔移动到StackSnippet来大大改进。在答案编辑器中使用<>按钮。 - Jon P
1
我希望这正是你所寻找的... 所以我所要做的就是在每个卡片div周围添加一个card-wrap div 并在该card-wrap上使用hover，以便即使实际卡片正在旋转，光标的位置也没有问题。
.wrap-card:hover .card{
   transform: rotateY(180deg);
}

这是一段代码片段。 

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  background: rgb(250, 224, 30);
}

.card-container {
  display: flex;
  margin-top: 12%;
  margin-left: 15%;
  margin-right: 15%;
  justify-content: space-evenly;
  text-align: center;
  flex-wrap: wrap;
}

.card {
  width: 275px;
  height: 350px;
  border: 4px solid black;
  margin-top: 50px;
  border-radius: 2px;
  -webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.75);
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card-wrap:hover .card {
  transform: rotateY(180deg);
}

.card-front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.card-back {
  background: wheat;
}

.card-text {
  list-style: none;
  margin: 20px 50px 0px 50px;
  line-height: 40px;
}

.card-text li:not(:last-child) {
  border-bottom: 1px solid #0004;
}

.card-img {
  height: 150px;
  width: 268px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.card-front:nth-child(1) {
  animation: fadeIn 1.5s 0.3s backwards;
}

.card-front:nth-child(2) {
  animation: fadeIn 1.5s 0.6s backwards;
}
.card-front:nth-child(3) {
  animation: fadeIn 1.5s 0.9s backwards;
}
.card-front:nth-child(4) {
  animation: fadeIn 2s 1.2s backwards;
}
.card-front:nth-child(5) {
  animation: fadeIn 2s 1.5s backwards;
}
.card-front:nth-child(6) {
  animation: fadeIn 2s 1.8s backwards;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script defer src="https://use.fontawesome.com/releases/v5.9.0/js/all.js" integrity="sha384-7Gk1S6elg570RSJJxILsRiq8o0CO99g1zjfOISrqjFUCjxHDn3TmaWoWOqt6eswF" crossorigin="anonymous">
  </script>
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./style.css" />
</head>

<body>

  <!-- 
            This is where the cards start
        -->
  <div class="card-container">
    <div class="card-wrap">
      <div class="card">
      <div class="card-front">
        <img src="./img/cool-background.png" alt="background" class="card-img">
        <ul class="card-text">
          <li>React | Redux</li>
          <li>NodeJS</li>
          <li>JavaScript</li>
        </ul>
      </div>
      <div class="card-back">
        <ul class="card-text">
          <li>hello</li>
          <li>twice</li>
        </ul>
      </div>
    </div>
    </div>
    <div class="card-wrap">
      <div class="card">
      <div class="card-front">
        <img src="./img/cool-background.png" alt="background" class="card-img">
        <ul class="card-text">
          <li>React | Redux</li>
          <li>NodeJS</li>
          <li>JavaScript</li>
        </ul>
      </div>
      <div class="card-back">
        <ul class="card-text">
          <li>hello</li>
          <li>twice</li>
        </ul>
      </div>
    </div>
    </div>
 

  </div>
  <!--
            Card End
        -->
</body>

</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接