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。这将需要首先显示伪元素，即白色背景，然后它将需要翻转到图像中。因此，与当前班级完全相反。

我怎样才能做到这一点？

DEMO

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

Answer 1

只需更改transform rotateY value to 354deg，Demo

即可

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

Answer 2

希望这会帮助你。DEMO

使用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

你可以使用

transform：scaleX（-1）; filter：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;

        }

如何颠倒CSS翻转动画中元素的顺序？

3 个答案: