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

【问题标题】：Unable to execute a CSS transform. Can someone see and help me out?无法执行 CSS 转换。有人可以看到并帮助我吗？
【发布时间】：2021-04-16 16:28:43
【问题描述】：

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

Here's is my code

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

This is an example

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

【问题讨论】：

请将您的代码添加到您的问题的堆栈中，而不是链接到其他页面。当外部页面最终消失时，这个问题仍然存在，然后再也没有人可以看到您的代码......
好吧...我会这样做的

标签： html css css-transitions responsive css-transforms

【解决方案1】：

我认为这是您想要的，但是您必须将描述包装在一个元素中（例如“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>

【讨论】：

我可以为一张卡做到这一点。但我正在尝试构建一个 flexbox，并且我希望 flex 框中的每张卡片都位于中心并被缩放。
那么现在是将 html 添加到您的问题的好时机，这样我们就可以看到您想要什么，而无需猜测它可能是什么；)...

【解决方案2】：

您应该查看transform: scale 属性。我认为这就是你所需要的；） https://developer.mozilla.org/fr/docs/Web/CSS/transform-function/scale()

transform: scale(2); /* --> Gives you the double resized of normal item*/

【讨论】：