javascript - Flip Card CSS 强制我以 px 为单位添加高度

Question

我正在尝试在我的网页中实现翻转卡片 css/js 代码，到目前为止一切正常。我想让卡片响应式，有什么用，只要我将高度切换为 100% 并将宽度切换为自动，它就会折叠并且所有卡片都在彼此之上。在特定高度下它可以工作……但这会破坏响应能力。感谢您的帮助!

http://codepen.io/HendrikEng/pen/YWmqgd

img {
    height: 100%;
    width: auto;
}

.c-services__item__content {
  height: 100%;
  width: auto;
}

.c-services__item {
  perspective: 1000px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  -ms-perspective: 1000px;
}

.c-services__item .c-services__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: inline-block;
  position: relative;
  width: 200px;
  height: 400px; // why do i have to set a specific height 
}

.c-services__item.applyflip .c-services__item__content {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}

.c-services__item .c-services__item__content .c-services__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;
  position: absolute;
  top: 0;
  left: 0;
  //height:400px;
  width: 100%;
}

.c-services__item.applyflip .c-services__item__content .c-services__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-services__item .c-services__item__content .c-services__item--back {
  background-color: pink;
  overflow: hidden;
  height: 100%;
  width: auto;
}

.c-services__item .c-services__item__content .c-services__item--front,
.c-services__item .c-services__item__content .c-services__item--back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: visible;
  position: absolute;
  overflow: hidden;
  width: 100%;
  text-align: center;
  display: inline-block;
}

.c-services__item .c-services__item__content .c-services__item--front,
.c-services__item.applyflip .c-services__item__content .c-services__item--front {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
}

.c-services__item .c-services__item__content .c-services__item--back,
.c-services__item.applyflip .c-services__item__content .c-services__item--back {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
}

.c-services__item .c-services__item__content .c-services__item--front,
.c-services__item.applyflip .c-services__item__content .c-services__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-services__item.applyflip .c-services__item__content .c-services__item--front,
.c-services__item .c-services__item__content .c-services__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: 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

评论后编辑 - DEMO current

DEMO previous

.c-services__item {
  perspective: 1000px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  -ms-perspective: 1000px;
  display: inline-block; /* Make div inline */
  vertical-align: middle; /* align vertically top|bottom|middle|baseline */
}