3

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

我现在有两个问题...

  1. 翻转后，仅呈现的右半部分<div>正在注册onClick

  2. 在浏览器不支持转换的情况下，我希望它降级为：

    • 一个简单的非动画版本
    • 或两者<div>并排

任何解决这些问题的解决方案/建议都非常感谢。

4

3 回答 3

2

对于右半部分，我在我的网站（http://worldisbeautiful.net）上也遇到了这个问题，该网站也使用了翻转动画。它看起来像一个 webkit 错误，你的动画在 firefox 上运行良好。我很难避免这个错误，我不确定你如何用你的动画来避免它，因为我在“后”DIV 中涉及 2 个额外的 DIV。但是，我不得不pointer-events: none;在后面使用div，希望它可以帮助你。

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

于 2013-06-07T12:39:27.723 回答
2

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

HTML结构

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

Jsfiddle 上的演示

于 2014-03-05T07:30:45.677 回答
0

至2。

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

该库测试css 功能并将相应的类添加到 html 标记。（例如csstransforms）。有了这个，您可以设置与支持的功能相对应的区域。

例如，在您的样式表中有这样的规则：

/*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/你有一个你可以测试的所有特性的列表。

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

于 2013-06-07T12:38:58.963 回答