我对整个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);
    }