Question

如果您转到http://checkify.ca/science-world/

我试图将三个圈子中心翻转过来。目前我有

CSS

.flip {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    width: 295px;
    min-height: 380px;

    @include perspective(1000);
    .flip-front, .flip-back {
        position: absolute;
        top: 0;
        left: 0;
        @include transform-style(preserve-3d);
        @include backface-visibility(hidden);
        @include transition(0.75s);
    }
    .flip-front {
        z-index: 5;
    }
    .flip-back {
        z-index: 0;
        @include rotateY(-180deg);
    }
    &:hover .flip-front {
        z-index: 5;
        @include rotateY(180deg);
    }
    &:hover .flip-back {
        z-index: 10;
        @include rotateY(0deg);
    }
}

但这似乎不起作用。父元素“Intro”也设置为text-align：center;但这没有效果。

Answer 1

由于你绝对定位它们并且你有一个设定的宽度，你可以将它添加到.flip-front。翻转：

left: 50%;
margin-left: -115px;

此外，您可以摆脱.flip包装并执行此操作：

#intro .circle{
    margin: 60px 47.75px;
}

Answer 2

他们已经看起来非常靠近中心，只是向左偏移了一点。我可以通过将.flip的宽度设置为230px（圆的宽度）来设置它们，将float设置为左边的圆圈，将右边的圆设置为float：right。中心圈不需要任何额外的东西。

Answer 3

您绝对定位.flip-front和.flip-back元素，然后使用left: 0;将它们固定在左侧。

您可以通过添加以下内容强制这些元素占用它们的所有宽度：

right: 0;

这会拉伸圈子，但有几种方法可以解决这个问题。例如，您可以使用以下值将其宽度设置为固定值：

width: 230px;

中心对齐内联块设置为相对位置

3 个答案: