Html 创建正面/背面无绝对定位的卡片翻转器_Html_Css_Css Position_Css Transforms

Html 创建正面/背面无绝对定位的卡片翻转器

html css

Html 创建正面/背面无绝对定位的卡片翻转器,html,css,css-position,css-transforms,Html,Css,Css Position,Css Transforms,我想向我的站点添加一个新功能，该功能使用David Walsh站点中的卡片翻转模式：。问题是，我的卡片中的内容是可变的，所以高度是未知的（它也是一个响应性很强的网站）。我的页面底部有一个页脚，需要位于该区域下方，但由于这种方法依赖于绝对定位，页脚将位于顶部，如此代码笔中所示：有人能想出任何css的黑客或修改这种方法，使其不必绝对定位卡 HTML: 您可以使用.front和.back强制容器取其父容器的高度。（高度：inherit；） JSfiddle：片段： .flip容器{ -webki

我想向我的站点添加一个新功能，该功能使用David Walsh站点中的卡片翻转模式：。问题是，我的卡片中的内容是可变的，所以高度是未知的（它也是一个响应性很强的网站）。我的页面底部有一个页脚，需要位于该区域下方，但由于这种方法依赖于绝对定位，页脚将位于顶部，如此代码笔中所示：

有人能想出任何css的黑客或修改这种方法，使其不必绝对定位卡

HTML:

您可以使用

.front

和

.back

强制容器取其父容器的高度。（

高度：inherit；

）
JSfiddle：

片段：

.flip容器{
-webkit透视图：1000；
-莫兹透视图：1000；
-o型透视图：1000；
前景：1 000；
边框：1px实心#ccc；
}
.flip容器：悬停.flipper，
.flip-container.hover.flipper{
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
.翻转容器，
.前线，
.回来{
宽度：320px；
高度：427px；
}
.鳍状肢{
-webkit转换：0.6s；
-webkit变换样式：保留-3d；
-moz跃迁：0.6s；
-moz变换样式：preserve-3d；
-o-转变：0.6s；
-o变换样式：preserve-3d；
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
身高：继承；
}
.前线，
.回来{
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-o-背面-可见性：隐藏；
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
.前线{
背景：url(http://davidwalsh.name/demo/dwflip.jpg)0 0不重复；
z指数：2；
}
.回来{
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
背景：#f8f8；
}
.前面.姓名{
字号：2em；
显示：内联块；
背景：rgba（33,33,33,0.9）；
颜色：#F8；
字体系列：信使；
填充物：5px10px；
边界半径：5px；
底部：60px；
左：25%；
位置：绝对位置；
文本阴影：0.1em 0.1em 0.05em#333；
-webkit变换：旋转（-20度）；
-moz变换：旋转（-20度）；
-o变换：旋转（-20度）；
变换：旋转（-20度）；
}
.背面标志{
位置：绝对位置；
顶部：40px；
左：90px；
宽度：160px；
高度：117px；
背景：url(http://davidwalsh.name/demo/logo.png)0 0不重复；
}
.封号{
字体大小：粗体；
颜色：#00304a；
位置：绝对位置；
顶部：180像素；
左：0；
右：0；
文本对齐：居中；
文本阴影：0.1em 0.1em 0.05em#acd7e5；
字体系列：信使；
字号：2em；
}
.backp{
位置：绝对位置；
底部：40px；
左：0；
右：0；
文本对齐：居中；
填充：0 20px；
字体系列：arial；
线高：2米；
}
页脚{
背景：红色；
}


大卫·沃什
@戴维德瓦尔斯堡
Mozilla Web开发者、MooTools&jQuery顾问、MooTools核心开发者、Javascript狂热者、CSS修补者、PHP黑客和Web爱好者
这是我的页脚

如果不使用绝对定位，我认为不可能产生类似的效果

最好的方法是在JS中抓住高度

下面是一个代码笔，其中包含一些基本内容：

基本上，只需将页脚移出flip容器并添加一些类似这样的JS

var heightFront, heightBack;

heightFront = $('.front').height();
heightBack = $('.back').height();

if(heightFront > heightBack){
  $('.flip-container').height(heightFront);
}else{
  $('.flip-container').height(heightBack);
}

我找到了一种使用纯css和无绝对位置的方法来实现这一点。我使用css动画而不是过渡，您可以在50%关键帧处将元素的高度/宽度设置为0。看看小提琴：

Sass：

我今天在玩这个，只是在这个问题上绊倒了一下，因为我的解决方案附带了一个小小的警告

.flip-container {
  perspective: 1000;
}
.flipper {
  transform-style: preserve-3d;
  display: flex;
  align-items: stretch;
  width: 100%;
  transition: transform 0.6s;
  will-change: transform;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  width: 100%;
  flex: 0 0 auto;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
  margin-left: -100%;
}

这是因为行中的弹性项可以采用最高行项目的高度。根据需要设置

.front

和

.back

的样式，只是不要设置它们的高度

需要注意的是，如果另一侧在渲染后变大（例如，因为图像已加载），则较短一侧的渲染高度似乎会出现小故障。如果高度因窗口大小的改变而改变也没关系，但如果内容突然加载似乎就不一样了。当然，这可能不会最终成为你的情况，但我最终不得不给图像一个设置高度的容器。如果您不需要纯CSS解决方案，那么在显示整个翻转卡之前等待图像加载也是可行的，但这有点离题，因为您似乎没有使用

img

我也遵循了David Walsh博客示例，并且需要在flex上下文中执行此操作，因此，我发现翻转面板的绝对位置无法正常工作

我用计算机解决了这个问题

.flipper类中的相对位置
对于带有.flipper类的块，高度也是固定的，但为了使用不同的高度模式，可以分别设置为height:15em
顶部：前挡块为0
顶部：后挡块为负片

我必须调整值，以便在元素之间提供一些边距和空间。我使用onclick事件而不是悬停，这是我对UX的选择。但两者都可以做到

<!-- HTML -->
<p>three boxes on a flex basis with a onclick flipper effect</p>
<div class='flexinl'>
    <div class='flip-container fronted hand' 
      onclick="this.swapClasses('fronted,backed');">
        <div class="flipper fli300">
            <div class='front c1'>
                <h1>This is front 1</h1>
            </div>
            <div class='back c2'>
                <h1>This is back 1</h1>
            </div>
        </div>
    </div>
    <div class='flip-container fronted hand' 
      onclick="this.swapClasses('fronted,backed');">
        <div class="flipper fli300">
            <div class='front c1'>
                <h1>This is front 2</h1>
            </div>
            <div class='back c2'>
                <h1>This is back 2</h1>
            </div>
        </div>
    </div>
    <div class='flip-container fronted hand' 
      onclick="this.swapClasses('fronted,backed');">
        <div class="flipper fli300">
            <div class='front c1'>
                <h1>This is front 3</h1>
            </div>
            <div class='back c2'>
                <h1>This is back 3</h1>
            </div>
        </div>
    </div>
</div>  

/* CSS */
.c1 {color:white; background-color:green}
.c2 {color:white; background-color:orange}
.hand { cursor: pointer; }

/* based on David Walsh Flipper */
.flip-container {
    perspective: 1000px;
    border: 1px dashed #a9a9a9;
    margin-bottom:1.5em;    
}
  /* flip the pane when has the backed */
.flip-container.backed .flipper {
    transform: rotateY(180deg);
}
.fli300 {height: 15em;}
.fli300 .front {
    height: 12em !important;
}
.fli300 .back {
    height: 12em !important;
    top: -15em;
}

/* flip speed goes here */
.flipper {
    transition: .4s;
    transform-style: preserve-3d;
    position: relative;    
}

/* hide back of pane during swap */
.flipper .front, .flipper .back {
    backface-visibility: hidden;
    position: relative;
    left: 0;
    height: 100%;
    padding: 1.5em;    
}

/* front pane, placed above back */
.flipper .front {
    z-index: -1;
    top: 0;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.flipper .back {
    transform: rotateY(180deg);
}

/* some flex stuff */
.flexinl {  
    display: inline-flex; 
    flex-wrap: wrap;  
    justify-content: flex-start;
}
.flexinl > div {padding:0.2em}

/* some javascript for swapping two classes */

HTMLElement.prototype.swapClasses = function (dosclasses) {
    var clases = dosclasses.split(/\s*\,\s*/);
    var entra = clases[0];
    var sale = clases[1];
    if (this.classList.contains(sale)) {
        this.classList.remove(sale);
        this.classList.add(entra);
    } else {
        this.classList.remove(entra);
        this.classList.add(sale);
    }
    return this;
};


三个灵活的长方体，具有onclick翻转效果
这是前面1
这是1号
这是前面2
这是回来2
这是前面3
这是第三集
/*CSS*/
.c1{颜色：白色；背景色：绿色}
.c2{颜色：白色；背景色：橙色}
.hand{光标：指针；}
/*基于David Walsh F
@keyframes no-show {
    0% {
        transform: rotateY(0deg);
    height: auto;
    width: 100%;
    }

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

    50% {
        height: 0;
        width: 0;
    }

    100% {
        transform: rotateY(180deg);
        height: 0;
        width: 0;
    }
}

@keyframes show {
    0% {
        transform: rotateY(-180deg);
        height: 0;
        width: 0;
    }

    49% {
        height: 0;
        width: 0;
    }

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

    100% {
        transform: rotateY(0deg);
        height: auto;
        width: 100%;
    }
}

.flip-container {
    border: 1px solid #ccc;
}

.flip-container, .front, .back {
    width: 320px;
}

.flipper {
    position: relative;
}

.front, .back {
  position: relative;
    perspective: 1000px;

    transform-style: preserve-3d;
    perspective-origin: top center;
    animation-duration: 2s;
    animation-timing-function: linear;
    transition-property: transform;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    overflow: hidden;
}

.front {
    z-index: 2;

    transform: rotateY(0deg);
    animation-name: show;
    .flipper.active & {
        animation-name: no-show;
    }

  .inner {
    height: 300px;
    background: green;
  }
}

.back {
    transform: rotateY(-180deg);
    animation-name: no-show;

    .flipper.active & {
        animation-name: show;
    }

  .inner {
    height: 400px;
    background: blue;
  }
}

footer {
    background: red;
}

.flip-container {
  perspective: 1000;
}
.flipper {
  transform-style: preserve-3d;
  display: flex;
  align-items: stretch;
  width: 100%;
  transition: transform 0.6s;
  will-change: transform;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  width: 100%;
  flex: 0 0 auto;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
  margin-left: -100%;
}

<!-- HTML -->
<p>three boxes on a flex basis with a onclick flipper effect</p>
<div class='flexinl'>
    <div class='flip-container fronted hand' 
      onclick="this.swapClasses('fronted,backed');">
        <div class="flipper fli300">
            <div class='front c1'>
                <h1>This is front 1</h1>
            </div>
            <div class='back c2'>
                <h1>This is back 1</h1>
            </div>
        </div>
    </div>
    <div class='flip-container fronted hand' 
      onclick="this.swapClasses('fronted,backed');">
        <div class="flipper fli300">
            <div class='front c1'>
                <h1>This is front 2</h1>
            </div>
            <div class='back c2'>
                <h1>This is back 2</h1>
            </div>
        </div>
    </div>
    <div class='flip-container fronted hand' 
      onclick="this.swapClasses('fronted,backed');">
        <div class="flipper fli300">
            <div class='front c1'>
                <h1>This is front 3</h1>
            </div>
            <div class='back c2'>
                <h1>This is back 3</h1>
            </div>
        </div>
    </div>
</div>  

/* CSS */
.c1 {color:white; background-color:green}
.c2 {color:white; background-color:orange}
.hand { cursor: pointer; }

/* based on David Walsh Flipper */
.flip-container {
    perspective: 1000px;
    border: 1px dashed #a9a9a9;
    margin-bottom:1.5em;    
}
  /* flip the pane when has the backed */
.flip-container.backed .flipper {
    transform: rotateY(180deg);
}
.fli300 {height: 15em;}
.fli300 .front {
    height: 12em !important;
}
.fli300 .back {
    height: 12em !important;
    top: -15em;
}

/* flip speed goes here */
.flipper {
    transition: .4s;
    transform-style: preserve-3d;
    position: relative;    
}

/* hide back of pane during swap */
.flipper .front, .flipper .back {
    backface-visibility: hidden;
    position: relative;
    left: 0;
    height: 100%;
    padding: 1.5em;    
}

/* front pane, placed above back */
.flipper .front {
    z-index: -1;
    top: 0;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.flipper .back {
    transform: rotateY(180deg);
}

/* some flex stuff */
.flexinl {  
    display: inline-flex; 
    flex-wrap: wrap;  
    justify-content: flex-start;
}
.flexinl > div {padding:0.2em}

/* some javascript for swapping two classes */

HTMLElement.prototype.swapClasses = function (dosclasses) {
    var clases = dosclasses.split(/\s*\,\s*/);
    var entra = clases[0];
    var sale = clases[1];
    if (this.classList.contains(sale)) {
        this.classList.remove(sale);
        this.classList.add(entra);
    } else {
        this.classList.remove(entra);
        this.classList.add(sale);
    }
    return this;
};