Flip Card CSS forces me to add height in px

Question

i am trying to implement a flip card css/js code into my webpage everything works so far. I want to make the cards responsive , what kinda works, as soon as i switch the height to 100% and width to auto it collapses and all cards are on top of each other. with a specific height it works...but that would kill the responsiveness. Thanks for your help!

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% { } }

Can you maybe create an image of how the cards should behave? — Aziz, Aug 26 '16 at 23:53
i updated the codepen ..was not really clear without the grid — HendrikEng, Aug 27 '16 at 00:09
Can't transition or animate to "auto". "Auto" is realtive, it's not a value.. http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css — Scott, Aug 27 '16 at 00:40

4dgaurav · Accepted Answer · 2016-08-27T00:31:48.367

1

Edit after comment - 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 */
}

edited Aug 27 '16 at 00:31

answered Aug 27 '16 at 00:01

4dgaurav

11,360
4
32
59

@karle love to see pictures changing on that link. :) – 4dgaurav Aug 27 '16 at 00:03
thanks that helps already, but as soon as i want to have it responsive ( no specific height or width) it collapses ...i updated the codepen ...i am using susy as a grid – HendrikEng Aug 27 '16 at 00:06
thanks a lot @thesaurabhway that helped a lot , one last questions , why does it add the weird gap in between the first and second row of cards? thanks a lot for your help , really appreciated – HendrikEng Aug 27 '16 at 07:16

Flip Card CSS forces me to add height in px

1 Answers1