如何反轉CSS翻轉動畫中元素的順序？

Question

我目前有一個基本的CSS動畫，該動畫允許翻轉圖像並顯示反面，即純白色背景。 這是使用偽元素顯示的。

CSS：

.flipOut {
    -moz-transform: perspective(600px) rotateY(180deg);
    -ms-transform: perspective(600px) rotateY(180deg);
    -o-transform: perspective(600px) rotateY(180deg);
    -webkit-transform: perspective(600px) rotateY(180deg);
    transform: perspective(600px) rotateY(180deg);
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
    position: relative;
    left: 0;
    top: 0;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.flipOut:after {
    content:'';
    right: 0;
    bottom: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

我還需要一個可以切換的類，名為flipIn 。 首先需要顯示偽元素，即白色背景，然后才需要翻轉到圖像中。 因此，與當前類完全相反。

我該如何實現？

演示

---

編輯：可能應該提到，但是在元素被翻轉並顯示白邊之后，我將完全刪除元素並實例化一個新元素。 然后需要插入新元素，從而產生第一個元素被翻轉到新元素中的效果。

Answer 1

只需將您的transform rotateY value to 354deg更改transform rotateY value to 354deg ， 演示

transform: perspective(600px) rotateY(354deg);

Answer 2

希望這對你有幫助。 演示

用rotateY（-180deg）添加FlipIn類；

    .flipIn{

      -moz-transform: perspective(600px) rotateY(-180deg);
      -ms-transform: perspective(600px) rotateY(-180deg);
         -o-transform: perspective(600px) rotateY(-180deg);
       -webkit-transform: perspective(600px) rotateY(-180deg);
      transform: perspective(600px) rotateY(-180deg);

       }
    .image{
        -moz-transition: all 1s linear;
        -o-transition: all 1s linear;
       -webkit-transition: all 1s linear;
        transition: all 1s linear;
        position: relative;
        left: 0;
        top: 0;
        }

Answer 3

您可以使用

轉換：scaleX（-1）; 過濾器：FlipH;

.flipOut {
            -moz-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
            filter: FlipH;
            -ms-filter: "FlipH";

            /*-moz-transform: perspective(800px) rotateY(180deg);
            -ms-transform: perspective(800px) rotateY(180deg);
            -o-transform: perspective(800px) rotateY(180deg);
            -webkit-transform: perspective(800px) rotateY(180deg);
            transform: perspective(800px) rotateY(180deg);*/

            -moz-transition: all 1s linear;
            -o-transition: all 1s linear;
            -webkit-transition: all 1s linear;
            transition: all 1s linear;
            position: relative;
            left: 0;
            top: 0;
            -moz-backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;

        }