jquery - CSS3 跨浏览器问题

Question

我正在尝试使用 transform:rotatex 和 preserve-3d 使按钮的 div 翻转 onclick。它在 Chrome 上运行良好，但在 FF 和 IE 上运行不佳(仅支持版本 11 及更高版本)。我将不胜感激任何帮助。

HTML

     <div class="flip col-sm-3">
        <div class="card">
            <div class="face front">
                <div class="small-video">
                    <div class="clip-view clip-view-tenth">
                        <t:tv.newvideo media="media" width="250" height="145" includeJs="false" fluid="true" watched="watched" showtitle="false" showdescription="true" />
                        <div class="mask" onClick="$(this).hide(); $(this).parents('.clip-view').find('.video-js').trigger('play'); return false;">
                            <div class="tool-icon tooltip-icon-small">
                                <t:icon icon="play" />
                            </div>
                        </div>
                    </div>
                    <t:delegate to="block:titleBlock" />
                </div>
            </div>
            <div class="face back">
                <t:delegate to="block:clipChapters" />
            </div>
        </div>
    </div>

CSS

 .flip {
    -webkit-perspective: 800;
    width: 400px;
    height:290px;
    position: relative;
    margin: 0px 0px 50px 0px;}
.flip .card.flipped {
    -webkit-transform: rotatex(-180deg);
    -moz-transform: rotatex(-180deg);
    -o-transform: rotatex(-180deg); 
    -ms-transform: rotatex(-180deg);
    transform: rotatex(-180deg);

}
.flip .card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;    
    -webkit-transition: 0.5s;
}

.flip .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    z-index: 2;
    text-align: center;
}

.flip .card .front {
    position: absolute;
    z-index: 1;
}

.flip .card .back {
    -webkit-transform: rotatex(-180deg);

}

Answer 1

您只为 -webkit- 浏览器编写的一些样式，这可能是问题所在吗？

另见此处:http://caniuse.com/#feat=transforms3d IE 不支持 3d 变换 (preserve-3d)。

因此不仅要为 Webkit 添加样式，还要为 Firefox 添加样式:

.flip {
    -webkit-perspective: 800;
    width: 400px;
    height:290px;
    position: relative;
    margin: 0px 0px 50px 0px;
}
.flip .card.flipped {
    -webkit-transform: rotatex(-180deg);
    -moz-transform: rotatex(-180deg);
    -o-transform: rotatex(-180deg); 
    -ms-transform: rotatex(-180deg);
    transform: rotatex(-180deg);
}
.flip .card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;    
    -webkit-transition: 0.5s;
    -moz-transition:0.5s; 
    transition:0.5s; 
}

.flip .card .face {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:hidden;
    backface-visibility:hidden;
    z-index: 2;
    text-align: center;
}

.flip .card .front {
    position: absolute;
    z-index: 1;
}

.flip .card .back {
    -webkit-transform: rotatex(-180deg);
    transform:rotateX(-180deg);
    -moz-transform:rotateX(-180deg);
}