Question

所以我找到了我喜欢的 codepen 。

@import 'https://fonts.googleapis.com/css?family=Lily+Script+One';
body {
  background: #eee;
  font-family: 'Lily Script One';
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -150px;
  float: left;
  perspective: 500px;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card:hover .content {
  transform: rotateY( 180deg);
  transition: transform 0.5s;
}

.front,
.back {
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  line-height: 300px;
  color: #03446A;
  text-align: center;
  font-size: 60px;
  border-radius: 5px;
  backface-visibility: hidden;
}

.back {
  background: #03446A;
  color: white;
  transform: rotateY( 180deg);
}

<div class="card">
  <div class="content">
    <div class="front">
      Front
    </div>
    <div class="back">
      Back!
    </div>
  </div>
</div>

它的作用是让我将图像放入盒子中并旋转以创建动画。我已经放入了类似交易卡的图像，并且一切正常。

我遇到的问题是我希望有行和列，以便一个人可以用鼠标悬停在所有卡上并且它们都翻转。基本上我不知道如何对齐它们或将其放入行和列。另外，当我将它们放在页面上还有其他内容（例如文本，图像）并且可以滚动时，它倾向于挂在页面顶部并停留在该页面上。如果有人可以帮助我，我将不胜感激！

编辑：这是我修改的https://codepen.io/LC13/pen/PdxLGd

版本

Answer 1

尝试使用Flexbox。这是一种灵活的以行或列显示内容的方式。

您需要一个容器元素来封装所有卡。将其宽度设置为100%和display: flex;。另外，您需要从卡上移除绝对位置等，以使其正确对齐。

此示例代码显示了如何显示三张卡片：

HTML：

<div class="container">

    <div class="sscards">
        <div class="sscontents">
            <div class="sscardfront">
            </div>
            <div class="sscardback">
            </div>
        </div>
    </div>

    <div class="sscards">
        <div class="sscontents">
            <div class="sscardfront">
            </div>
            <div class="sscardback">
            </div>
        </div>
    </div>

    <div class="sscards">
        <div class="sscontents">
            <div class="sscardfront">
            </div>
            <div class="sscardback">
            </div>
        </div>
    </div>

</div>

CSS：

.container {
    width: 100%;
    display: flex;
}

.sscards {
    position: relative;
    width: 300px;
    height: 300px;
    perspective: 500px;
}

上面的链接介绍了更多使用flexbox样式化布局的选项。

在HTML中对齐多个CSS卡

1 个答案: