我想要一行 4 个翻转盒，但在我的代码中只显示 1答案

【问题标题】：i want 4 flipbox in one row but in my code is just showing 1我想要一行 4 个翻转盒，但在我的代码中只显示 1
【发布时间】：2020-08-27 11:03:49
【问题描述】：

伙计们，我希望你们一切都好，伙计们实际上面临一个问题，我有一个 CSS 翻转框代码，但在这段代码中，它只显示一排 1 个翻转框我想要一排 4 个翻转框我怎么能这样做请帮助我谢谢。这是我的代码：

<div class="box">
        <div class="front"></div>
        <div class="back"></div>
    </div>

CSS:
.box {
    position: inherit;
    top: calc(50% - 200px);
    left: calc(50% - 150px);
    width: 300px;
    height: 400px;
    transform-style: preserve-3d;
    transition: 2s;
    transform: perspective(500px) rotateY(00deg);
}
.box:hover {
    transform: perspective(500px) rotateY(180deg);
}
.box:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background: url(moon-side.jpg);
    transform: rotateY(90deg) translateX(-25px);
    transform-origin: left;
}
.box .front {
    width: 100%;
    height: 100%;
    background: url(moon.jpg);
    transform: translateZ(25px);
}

.box .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(moon.jpg);
    transform: translateZ(-25px) rotateY(180deg);
}

【问题讨论】：

标签： html css web 3d flip

【解决方案1】：

添加显示：内联块；到您的 .box。您可以在 HTML 中创建 4 个翻转框实例。而且你的身高有点奇怪，所以这可能是你想要的？

.box {
    position: inherit;
    transform-style: preserve-3d;
    transition: 2s;
    transform: perspective(500px) rotateY(00deg);
    display: inline-block;
    float: center;
    padding: 5px;
}
.box:hover {
    transform: perspective(500px) rotateY(180deg);
}
.box:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 100%;
    background: url(moon-side.jpg);
    transform: rotateY(90deg) translateX(-25px);
    transform-origin: left;
}
.box .front {
    width: 100%;
    height: 100%;
    background: url(moon.jpg);
    transform: translateZ(25px);
}

.box .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(moon.jpg);
    transform: translateZ(-25px) rotateY(180deg);
}

.container {
  text-align: center;
}

<div class="container">
<div class="box">
        <div class="front">hello front</div>
        <div class="back">hello back</div>
</div>

<div class="box">
        <div class="front">hello front</div>
        <div class="back">hello back</div>
</div>

<div class="box">
        <div class="front">hello front</div>
        <div class="back">hello back</div>
</div>

<div class="box">
        <div class="front">hello front</div>
        <div class="back">hello back</div>
</div>
</div>

【讨论】：

谢谢，兄弟，它的工作兄弟我怎样才能在中心对齐我的意思是页面中的 4 个翻转框中心
您需要为所有 4 个实例创建一个容器 div，然后将其文本对齐到中心。我更新了我的代码，请看。
没有兄弟有一个问题我无法更改翻转盒图像我想要每个翻转盒上的唯一图像如何做到这一点
只需使用 HTML 图像源更改我键入“hello front”和“hello back”的位置。看看我在这里做了什么jsfiddle.net/52kgvjsf
谢谢兄弟的帮助，非常感谢。