我想在一行中使用4个翻转箱，但在我的代码中只显示1个。

Question

小伙伴们，希望你们都没事，小伙伴们面临一个问题其实我有一个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);
}

Answer 1

添加display: inline-block;到你的.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>