时间戳

首页 > 解决方案 > 无法执行 CSS 转换。有人可以看到并帮助我吗？

html - 无法执行 CSS 转换。有人可以看到并帮助我吗？

问题描述

我对整个 CSS 和 Web 开发非常陌生。我一直在通过查看 W3 和 Codepen 上的示例来学习。我在可滑动的幻灯片中准备了一个 flexbox。我希望放大每张卡片并显示描述。我也把链接放在这里..有人可以解释我哪里出错了吗？

这是我的代码

我想在我的 flexbox 中的每个选项卡上进行 translazeZ 转换。我希望每个选项卡都扩展为更大的部分。

这是一个例子

    .card{ 
      display: flex;
      flex-wrap: wrap;
      flex-grow: 4;
      font-size: 22px;
      padding: 25px; 
      margin: 15px; 
      color: white;
      border-radius: 5px; 
      background: blue;
      transform-style: preserve-3d;
      transition: transform 0.5s; 
      justify-content: center;
      align-content: center; 
    }

    .card div {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 6px;
      background: blue;
      display: flex;
      justify-content: center;
      transform-style: preserve-3d;
      align-items: center;
      transition: 1s;
      color: white; 
    }
    .card .des {
      display: none;  
    }  
    .card.flipped { 
       transform: translateZ(100px);
    }

标签： htmlcsscss-transitionsresponsivecss-transforms

解决方案

我认为这就是您想要的，但是您必须将描述包装在一个元素（例如“span”）中，然后再将其包装在一个容器（例如“div”）中，以便以 flex 为中心，因为 toggle() 可以display: block;。

$('.container').on('click', function() {
  $('.card').toggleClass('flipped');
  $('.des').toggle();
});
.container {
  position: relative;
  width: 300px;
  height: 200px;
  perspective: 800px;
}

.card {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 4;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  padding: 25px;
  margin: 15px;
  border-radius: 5px;
  font-size: 22px;
  background: blue;
  color: white;
}

.card div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  border-radius: 6px;
  background: blue;
  color: white;
}

.card .des {
  display: none;
}

.card.flipped {
  transform: translateZ(100px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="card">
    <div>
      <h5>Integration</h5><br>
      <div class="des">
        <div>
          <span>Description, Yo, what up?</span>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读