Question

我正在尝试将翻转卡css / js代码实现到我的网页中，到目前为止一切正常。我想让卡响应，什么样的工作，一旦我将高度切换到100％，宽度自动崩溃，所有卡都在彼此之上。具有特定的高度它有效...但这会杀死响应性。谢谢你的帮助！

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

#include "afxribbonslider.h"
#pragma once

class CMyRibbonSlider : public CMFCRibbonSlider
{
    DECLARE_DYNCREATE(CMyRibbonSlider)
public:
    CMyRibbonSlider();
    CMyRibbonSlider(UINT nID, int nWidth = 100);

// Implementation
public:
    virtual ~CMyRibbonSlider();
    virtual void OnLButtonUp(CPoint point); 
};

Flip Card CSS强制我在px中添加高度

1 个答案: