1

我一直在玩这个 CSS3 动画，但我无法让它从不同于中间的位置旋转。

这是一个动画，从中间产生类似翻转的效果，上半部分进入负 z 轴，下半部分进入正 z 轴。

我试图让枢轴点成为顶部，以便在转换应用此动画的元素时，整个元素进入正 z 轴。

然后 FlipOut 动画将与此相反。

我会很感激任何帮助让这个动画像我描述的那样表现。

这是现在运行动画的代码：

 .animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.6s;
    -moz-animation-duration: 0.6s;
    -ms-animation-duration: 0.6s;
    -o-animation-duration: 0.6s;
    animation-duration: 0.6s;
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
       -webkit-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    -moz-backface-visibility: visible !important;
    -moz-animation-name: flipInX;
    -o-backface-visibility: visible !important;
    -o-animation-name: flipInX;
    backface-visibility: visible !important;
    animation-name: flipInX;
}
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-moz-keyframes flipOutX {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg);
         opacity: 1;
    }
100% {
         -moz-transform: perspective(400px) rotateX(90deg);
         opacity: 0;
    }
}

@-o-keyframes flipOutX {
    0% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
100% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
     0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    -moz-animation-name: flipOutX;
    -moz-backface-visibility: visible !important;
    -o-animation-name: flipOutX;
    -o-backface-visibility: visible !important;
    animation-name: flipOutX;
    backface-visibility: visible !important;
}
4

1 回答 1

3

设置变换原点：

transform-origin : center top;

根据 MDN 文档：

transform-origin: x-offset                                   /* One-value syntax */   E.g.  transform-origin: 2px 
transform-origin: offset-keyword                                                      E.g.  transform-origin: bottom

transform-origin: x-offset y-offset                          /* Two-value syntax */   E.g.  transform-origin: 3cm 2px
transform-origin: y-offset x-offset-keyword                                           E.g.  transform-origin: 2px left
transform-origin: x-offset-keyword y-offset                                           E.g.  transform-origin: left 2px
transform-origin: x-offset-keyword y-offset-keyword                                   E.g.  transform-origin: right top
transform-origin: y-offset-keyword x-offset-keyword                                   E.g.  transform-origin: top right

transform-origin: x-offset y-offset z-offset                 /* Three-value syntax */ E.g.  transform-origin: 2px 30% 10px
transform-origin: y-offset x-offset-keyword z-offset                                  E.g.  transform-origin: 2px left 10px
transform-origin: x-offset-keyword y-offset z-offset                                  E.g.  transform-origin: left 5px -3px
transform-origin: x-offset-keyword y-offset-keyword z-offset                          E.g.  transform-origin: right bottom 2cm
transform-origin: y-offset-keyword x-offset-keyword z-offset                          E.g.  transform-origin: bottom right 2cm
于 2013-03-12T06:34:48.283 回答