Question

我使用以下css ...

在两个div之间创建了一个翻转过渡

.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);
}

使用以下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>

你可以在这里看到例子......

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

我现在有两个问题......

1）翻转后，只有正在显示的<div>的右半部分正在注册onClick

2）如果浏览器不支持转换，我希望它降级为：

一个简单的无动画版
或两个<div>的并排

解决其中任何一个的任何解决方案/细分都非常受欢迎。

Answer 1

对于右半部分，我在使用翻转动画的网站（http://worldisbeautiful.net）中遇到了这个问题。它看起来像一个webkit bug，你的动画可以正常使用firefox。我有一些困难时间来避免这个错误，我不知道你怎么能用你的动画来避免它，因为我在“后面”DIV中涉及2个额外的DIV。但是，我必须在后面div中使用pointer-events: none;，希望它可以帮助你。

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

Answer 2

我之前在使用卡片翻转时遇到了同样的问题，现在我已经获得了所有浏览器的解决方案，即使对于IE10修复也是如此。我已经为悬停而写，请根据您的要求使用所需的代码。

HTMl Strucrure

<div class="flip-container">
   <div class="flipper">
      <div class="front">
        front
      </div>
    <div class="back">
        back
    </div>
</div>

<强> CSS

.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective:1000;
    -ms-perspective: 1000;
    perspective: 1000;

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

}



    /* for IE */
.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* END: for IE */


.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;

    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

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

    position: relative;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -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;

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

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

    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;


}

.front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    background-position: center center;
    z-index: 2;
    background:green;
}

.back {
    background: #f2f2f2;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(-180deg);
}

Demo on Jsfiddle

Answer 3

2。

你有没有看过modernizr。（仅在js处于活动状态时有效。）

此库测试以获取css功能，并将相应的类添加到html标记中。（例如csstransforms）。使用此功能，您可以设置与支持的功能对应的区域的样式。

e.g。你的样式表中有这样一条规则：

/*this is the common rule*/
.theArea {
     border: 1px solid green;
}

/*this rule will be applied if transitions are available*/
.csstransforms .theArea {
     border: 1px solid red;
}

在http://modernizr.com/download/，您有一个可以测试的所有功能的列表。

它并不真正测试该功能是否存在。但是测试浏览器是否知道使用的相应关键字，如果是，那么浏览器很可能支持该功能。

两个<div>的</div>之间的CSS翻转过渡

3 个答案: