两个< div>之间的CSS翻转转换 [英] CSS Flip Transition Between Two <div>'s

问题描述

我已经使用以下CSS创建了两个div之间的翻转过渡：

  .flip-container {
 -webkit-perspective：1000; 
 
 -moz-perspective：1000; 
 -moz-transform：perspective（1000px）; 
 -moz-transform-style：preserve-3d; 
 
 -o-perspective：1000; 
 
透视：1000; 
 max-width：320px; 
 width：100％; 
} 
 
 / *翻转速度在这里* / 
 .flipper {
 -webkit-transition：0.6s; 
 -webkit-transform-style：preserve-3d; 
 
 -moz-transition：0.6s; 
 -moz-transform-style：preserve-3d; 
 
 -o-transition：0.6s; 
 -o-transform-style：preserve-3d; 
 
 transition：0.6s; 
 transform-style：preserve-3d; 
 
 position：relative; 
} 
 
 .flipper> img {
 opacity：0; 
 z-index：0; 
} 
 
 .flipper.flipped {
 -webkit-transform：rotationY（180deg）; 
 -moz-transform：rotateY（180deg）; 
 -o-transform：rotateY（180deg）; 
 transform：rotateY（180deg）; 
} 
 
 / *在交换期间隐藏窗格* / 
 .front，.back {
 -webkit-backface-visibility：hidden; 
 -moz-backface-visibility：hidden; 
 -o-backface-visibility：hidden; 
 backface-visibility：hidden; 
 overflow：hidden; 
 position：absolute; 
 top：0; 
 left：0; 
} 
 
 / *前窗格，放置在后面* / 
 .front {
 z-index：2; 
} 
 
 / * back，初始隐藏窗格* / 
 .back {
 -webkit-transform：rotateY（180deg）; 
 -moz-transform：rotateY（180deg）; 
 -o-transform：rotateY（180deg）; 
 transform：rotateY（180deg）; 
} 
  

使用以下html ...

 < div class =flip-container> 
< div class =flipperid =flipperonclick =this.classList.toggle（'flipped'）> 
< div class =frontid =front>< / div> 
< div class =backid =back>< / div> 
< / div> 
< / div> 
  

您可以在这里查看示例...

http://www.makesomeoneappy.co.uk/your-card/

我现在有两个问题...

1）翻转只有右半部分< div> 正在注册 onClick

在浏览器不支持转换的情况下，我想将其降级为：

• 一个简单的无动画版本


• 或两个< div> 的并列

$

解决方案

对于右半边，我遇到了这与我的网站（ http://worldisbeautiful.net ）使用翻转动画太。它看起来像一个webkit错误，你的动画用firefox正常工作。
我有一些困难的时候，以避免这个错误，我不知道你如何可以避免它与你的动画，因为我的涉及2额外的DIV里面后DIV。
然而，我不得不在后面div中使用 pointer-events：none; ，希望它可以帮助你。

对于第二个问题，我建议您默认显示降级版本。然后，您可以使用Modernizr等检查浏览器支持，然后使用您的动画所需的CSS。
http://modernizr.com/
您需要检查 csstransitions ， csstransforms 和 csstransforms3d 。

I have created a flip transition between two divs using the following css...

.flip-container {
    -webkit-perspective: 1000;

    -moz-perspective: 1000;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;

    -o-perspective: 1000;

    perspective: 1000;
    max-width: 320px;
    width: 100%;
}

/* flip speed goes here */
.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;

    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

.flipper > img {
    opacity: 0;
    z-index: 0;
}

.flipper.flipped {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* hide back of pane during swap */
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
}

/* back, initially hidden pane */
.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);    
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

With the following html...

<div class="flip-container">
  <div class="flipper" id="flipper" onclick="this.classList.toggle('flipped')"> 
    <div class="front" id="front"></div>
    <div class="back" id="back"></div>
  </div>
</div>

You can see example here...

http://www.makesomeoneappy.co.uk/your-card/

I now have two problems...

1) After flip only the right half of the presented <div> is registering the onClick

2) Where the browser doesn't support the transition I would like this to degrade to either:

• a simple none animated version
• or the two <div>'s side-by-side

Any solutions/seggustions to fix either of these greatly appreciated.

解决方案

For the right half, I encounter this with my website (http://worldisbeautiful.net) which use the flip animation too. It looks like a webkit bug, your animation works fine with firefox. I had some hard time to avoid this bug, and i'm not sure how you can avoid it with your animation because mine involve 2 additionals DIV inside "back" DIV. However, I had to use pointer-events: none; inside the back div, hope it can help you.

For the second question, i suggest you to display degraded version by default. Then, you can use something like Modernizr to check for browsers supports and then use the CSS you need for your animation. http://modernizr.com/ You'll need to check for csstransitions, csstransforms and csstransforms3d.

这篇关于两个< div>之间的CSS翻转转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！