使CSS转换效果在所有浏览器中都可用 [英] Making CSS transition effects work in all browsers

问题描述

我目前有以下CSS，它适用于Google Chrome（Webkit），但不适用于任何其他浏览器。

I currently have the following CSS, it works in Google Chrome (Webkit), but not in any other browser.

一切？

正如你所看到的那样，它使用的是webkit，但我不知道moz是什么。

As you can see it is using webkit, but I'm not sure what the moz equivalents are.

非常感谢。

.card{
    margin-top: -50px;
}

.card {
    width: 286px; height: 224px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    -moz-transform-style: preserve-3d;
    -moz-transition: 0.5s;
}
    .container:hover .card {
        -webkit-transform: rotateY(180deg); 
        -moz-transform: rotateY(180deg);                

    }

.face {
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}


.megatron {
    float: left; top: 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}
    .megatron .front {

    }
    .megatron .back {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);

    }
        .megatron .back h2 {
            background: url(megatron-title.png); text-indent: -9999px; 
        }
        .megatron img {
            float: right;
        }

推荐答案

声明：

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

这是我最喜欢的工具之一，可以帮助加快这个过程：http://css3generator.com/

Here is one of my favorite tools to help speed up the process: http://css3generator.com/

这篇关于使CSS转换效果在所有浏览器中都可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！