Html 如何反转CSS翻转动画中元素的顺序？

我目前有一个基本的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

的可切换类。这需要首先显示伪元素，即白色背景，然后需要翻转到图像中。因此，与当前类完全相反

我怎样才能做到这一点

---

编辑：

---

可能应该提到，但是在翻转元素并显示白色的一面之后，我将完全删除该元素并实例化一个新元素。然后新元素需要向内翻转，使第一个元素被翻转为新元素。

只需将

transform rotateY值更改为354deg

希望这能对你有所帮助

添加带旋转的FlipIn类（-180度）

你可以用

转换：scaleX（-1）；过滤器：FlipH

---

可能应该提到，但是在翻转元素并显示白色的一面之后，我将完全删除该元素并实例化一个新元素。然后新元素需要向内翻转，从而产生第一个元素被翻转为新元素的效果。

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

    .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;
        }

.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;

        }