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 个答案: