Question

我正在努力让卡片翻转部分完全响应。我设法使一切工作和响应，但一旦我达到1920px的宽度，他们卡片分开，不扩大宽度。我不知道为什么因为我将宽度等全部设置为100％。非常感谢，我有点失落。

c-service {
    padding-bottom: span(.5);
}

.c-service__title {
    margin-top: span(.5);
    margin-bottom: span(.5);
}

.c-service__item__icon {
    position: relative;
    top: 20%;
    height: 120px;
    padding-bottom: span(2);
}

.services__item__content {
    position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

.c-service__item--back p {
    font-size: 1.2em;
}
.c-service__item--back h5 {
    padding-top: 50px;
}
.c-service__item {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    //display: flex;
    //vertical-align: middle;
}
.c-service__item .c-service__item__content {
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;
    display: flex;
    position: relative;
    width: 100%;
    width: auto;
}
.c-service__item.applyflip .c-service__item__content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}
.c-service__item .c-service__item__content .c-service__item--static {
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    text-align: center;
}
.c-service__item.applyflip .c-service__item__content .c-service__item--static {
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}
.c-service__item .c-service__item__content .c-service__item--back {
    background-color: blue;
    color: white;
    overflow: hidden;
    position: absolute;
    height:100%;
    width: 100%;
}
.c-service__item .c-service__item__content .c-service__item--back,
.c-service__item .c-service__item__content .c-service__item--front {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    overflow: hidden;
    text-align: center;
}
.c-service__item .c-service__item__content .c-service__item--front,
.c-service__item.applyflip .c-service__item__content .c-service__item--front {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}
.c-service__item .c-service__item__content .c-service__item--back,
.c-service__item.applyflip .c-service__item__content .c-service__item--back {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}
.c-service__item .c-service__item__content .c-service__item--front,
.c-service__item.applyflip .c-service__item__content .c-service__item--back {
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible;
}
.c-service__item .c-service__item__content .c-service__item--back,
.c-service__item.applyflip .c-service__item__content .c-service__item--front {
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden;
}

@keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}
@-webkit-keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}
@-moz-keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}
@-o-keyframes stayvisible {
    from {
        visibility: visible;
    }
    to {
        visibility: visible;
    }
}
@-ms-keyframes donothing {
    0% {}
    100% {}
}

Answer 1

看到了你的解决方案，请记住，通过将高度和宽度设置为100％，你必须具有固定的图像平方比率，如果图像是矩形，它将被拉伸。

设置它是为了避免它：

.c-service__item--front {
    min-height: 100%;
    min-width: 100%;
}

Answer 2

抱歉，我刚想通了：

我只需添加：

.c-service__item--front {
    height: 100%;
    width: 100%;
}

非常感谢你们

在宽度为1920之后无法获得图像响应

2 个答案: