CSS卡翻转动画

Question

我正在尝试制作动画，每次单击卡片时，卡片就会翻转并露出相反的一面。 每次翻转卡时，卡两边的文字都会改变。 我遇到的问题是，在偶尔的情况下，只能看到卡的正面。 我找不到任何逻辑来解释为什么通常通常看不见正面，但偶尔会看到正面。

这是我的jsfiddle： https ://jsfiddle.net/tdammon/ucf6mx1q/

这是HTML结构：

<body>
    <section>
        <div id="headerSection">
            <h1>Heard At Prime</h1>
        </div>
        <div id='whiteBlock'>
                <div id='front'>hey</div>
                <div id='back'>hi</div>


        </div>
    </section>
</body>
</html>

这是#whiteBlock div的翻转逻辑：

$(document).ready(onReady);

function onReady(){
    $('#whiteBlock').on('click', flipIt)
}

quotesArray=['hey','cool saying','funny thing','hahaha'];

function flipIt() {
    console.log('flip')

    $('#front').empty();
    $('#back').empty();
    let firstQuote= quotesArray[Math.floor(Math.random()*quotesArray.length)]
    let secondQuote= quotesArray[Math.floor(Math.random()*quotesArray.length)]
    $('#front').append(firstQuote);
    $('#back').append(secondQuote);
    $('#whiteBlock').toggleClass('flip');


};

和CSS动画：

body {
    background-color: blue;
}

section{
    perspective: 500px;
}

#whiteBlock{
    background-color:white;
    height: 100px;
    width:100px;
    transform: scale(1);
    transform-style: preserve-3d;
    /* transition: transform .5s;  */
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: absolute;
    animation: move 3s linear infinite;  */
}

#whiteBlock:active{
    transform:scale(.97);
    transition: transform .2s
}

#whiteBlock.flip{
    transform:rotateY(180deg)
}

#front{
    transform: rotateY(180deg);
    backface-visibility: hidden;   
}


#back{
    position:absolute;   
    backface-visibility: hidden;
}

Answer 1

backface-visibility仍然需要供应商前缀。 因此，对于Chrome和Safari，您需要-webkit-backface-visibility ；对于Firefox，则需要-moz。

经过几处更改，这对Safari来说对我来说工作较少，应该是一个很好的起点：

 $(document).ready(onReady); function onReady() { $('#whiteBlock').on('click', flipIt) } let quotesArray = ['hey', 'cool saying', 'funny thing', 'hahaha']; function flipIt() { console.log('flip') $('#front').empty(); $('#back').empty(); let firstQuote = quotesArray[Math.floor(Math.random() * quotesArray.length)] let secondQuote = quotesArray[Math.floor(Math.random() * quotesArray.length)] $('#front').append(firstQuote); $('#back').append(secondQuote); $('#whiteBlock').toggleClass('flip'); };

 section { perspective: 500px; } #whiteBlock { border: 1px solid #333; height: 100px; width: 100px; transition: 0.6s; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; position: relative; } #whiteBlock.flip { transform: rotateY(180deg) } #front { transform: rotateY(0deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } #back { transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div id="headerSection"> <h1>Heard At Prime</h1> </div> <div id='whiteBlock'> <div id='front'>hey</div> <div id='back'>hi</div> </div> </section>

CSS卡翻转动画

问题描述

1 个解决方案

解决方案1
0 2018-10-24 03:48:50

CSS卡翻转动画

问题描述

1 个解决方案

解决方案1 0 2018-10-24 03:48:50

解决方案1
0 2018-10-24 03:48:50