Javascript CSS在两个之间翻转过渡<；部门>'；s

我已经使用以下css在两个div之间创建了一个翻转转换

.flip容器{
-webkit透视图：1000；
-莫兹透视图：1000；
-moz变换：透视图（1000px）；
-moz变换样式：preserve-3d；
-o型透视图：1000；
前景：1 000；
最大宽度：320px；
宽度：100%；
}
/*翻转速度在这里*/
.鳍状肢{
-webkit转换：0.6s；
-webkit变换样式：保留-3d；
-moz跃迁：0.6s；
-moz变换样式：preserve-3d；
-o-转变：0.6s；
-o变换样式：preserve-3d；
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
}
.flipper>img{
不透明度：0；
z指数：0；
}
.鳍状肢{
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
/*交换期间隐藏窗格的背面*/
.前面，.后面{
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-o-背面-可见性：隐藏；
背面可见性：隐藏；
溢出：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
/*前窗格，置于后上方*/
.前线{
z指数：2；
}
/*背面，最初隐藏的窗格*/
.回来{
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}

使用以下html

我现在有两个问题

翻转后，仅显示的

的右半部分正在注册

onClick

如果浏览器不支持转换，我希望将其降级为：

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

非常感谢您提供任何解决方案/建议来解决这两个问题。

至2

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

这个库测试css特性，并将相应的类添加到html标记中。（例如，

cstransforms

）。使用此选项，您可以设置与支持的功能相对应的区域的样式

e、 g.在样式表中有这样的规则：

/*这是常见的规则*/
.西亚地区{
边框：1px纯绿色；
}
/*如果转换可用，则将应用此规则*/
.cstransforms.theArea{
边框：1px纯红；
}

至少，您有一个可以测试的所有功能的列表

---

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

对于右半部分，我的网站（）也使用翻转动画。它看起来像一个webkit bug，你的动画在firefox上运行良好。 我很难避免这个错误，我不确定你如何用你的动画来避免它，因为我的动画在“back”DIV中包含了2个额外的DIV。 然而，我不得不使用

指针事件：无在后面的div里，希望能对你有所帮助

对于第二个问题，我建议您默认显示降级版本。然后，您可以使用类似Modernizer的工具来检查浏览器支持，然后使用动画所需的CSS。
您需要检查
cstransitions
，
cstransforms
和
cstransforms3d
，我之前也遇到过同样的卡翻转问题，现在我已经为所有浏览器找到了卡翻转的解决方案，即使是IE10修复程序。我已经写了悬停请使用所需的代码根据您的要求

HTMl结构

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

至1:我目前不知道如何解决，但它似乎是一个由3d旋转引起的
z-ordering
bug。如果你使用Chrome的开发工具，用放大镜检查鼠标左侧的哪个元素，你会看到它是
sentInfo
div。我希望这个信息能帮助你解决这个问题。是的-我现在已经整理好了-谢谢你我很高兴这个信息能帮到你。你是明显改变了还是有什么特别的？知道会很有趣。这有点“黑客”，但现在我刚刚将onClick添加到
sentInfo
div中，这样它就可以启动，而无需尝试找出过渡后
z-index
发生了什么-它已经起作用了-我稍后将看到一个更优雅的解决方案（可能正在做一些重新调整工作，这样
sentInfo
就不会接近转换）。+1对于
指针事件：无；
它也有问题，但我认为没有其他解决方法那么有问题：当我遇到这个错误时，我认为它确实有问题（我认为这是一个错误）我找不到太多关于它的信息。所有关于z-index的实验，似乎都涉及到某种程度，从来没有起作用。只有指针事件起作用。对我来说，它看起来像一个浮点错误，
180deg
类似于
179.999deg
或
181.000deg
（对此不确定）。结果是它稍微旋转了一下，一部分在
页面上方一点，另一半在页面内部一点。@HemersonVarela thx将
/
更改为
/**/
。没有意识到这在css中是不允许的（似乎我经常使用
sass
）：
.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);
}