Question

我试图按照这个教程http://desandro.github.io/3dtransforms/docs/card-flip.html（第二个向下，“幻灯片翻转”，这是他的结果http://desandro.github.io/3dtransforms/examples/card-02-slide-flip.html）但我得到了一个与教程编写者的主要区别 - 他的卡片保持在盒子似乎沿Z轴向后推，我的卡片似乎更靠近观察者，因此肯定不会留在盒子里。

我的浏览器是Ubuntu Linux上的Chromium，但我也尝试过Firefox。

这是我的小提琴： http://jsfiddle.net/vASj9/2/

以下是示例代码（我在小提琴中）

HTML

    <div id="module_1" class="sidebar debug">
        <div id="module_1_cardContainer" class="cardContainer">
            <div id="module_1_cardFront" class="cardFront">
                <div id="module_1-slide_1" class="slide">Front</div>
            </div>
            <div id="module_1_cardBack" class="cardBack-horizontal">
                <div id="module_1-slide_2" class="slide">Back</div>
            </div>        
        </div>
    </div>

CSS

.sidebar {
    margin-top:20px;
    border:solid 1px black;
    width:100%;
    height:300px;
    position:relative;
    perspective:800px;
    -webkit-perspective:800px;
}      

.slide {
    background-color:red;
    height:100%;
    width:100%;
}

.cardContainer {
        width:100%;
        height: 100%;
        position: absolute;
        transform-style: preserve-3D;
        -webkit-transform-style: preserve-3D;
        transition: transform 1s;
        -webkit-transition: -webkit-transform 1s;

        transform-origin: right center;
        -webkit-transform-origin: right center;
      }

      .cardFront, .cardBack-horizontal, .cardBack-vertical {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform-style: preserve-3D;
        -webkit-transform-style: preserve-3D;
      }

      .cardBack-horizontal {
        transform: rotateY( 180deg );
        -webkit-transform: rotateY( 180deg );
      }

      .cardIsFlipped-horizontal {
        transform: translateX( -100% ) rotateY( 180deg );
        -webkit-transform: translateX( -100% ) rotateY( 180deg );
      }

JS用于测试：

$(function () {
    setTimeout(function(){
        $("#module_1_cardContainer").addClass("cardIsFlipped-horizontal");    
    },1500);
});

Answer 1

好吧，我必须为透视添加一个高数字，在我的情况下为5000，因为整个页面分辨率是高清。这足以推回它。

3d cardflip不停留在容器内

1 个答案: