Question

下面你有我用来尝试实现3D动画的代码：

<html>
<head>
    <title>3D CSS Animation</title>
    <style>
        #movieposters li { 
            display:inline; float:left;
            -webkit-perspective: 500; 
            -webkit-transform-style: preserve-3d;
            -webkit-transition-property: perspective; 
            -webkit-transition-duration: 0.5s; 
            transition-duration: 1s; 
            -moz-perspective: 500; 
            -moz-transform-style: preserve-3d;
            -moz-transition-property: perspective; 

        width: 200px;
        }

        #movieposters li:hover { 
            -webkit-perspective: 5000; 
            -moz-perspective: 5000; 
            transition-duration: 1s; 
            transition-timing-function: linear; 
        width: 200px;
        }

        #movieposters li img { 
            -webkit-transform: rotateY(30deg);
            -webkit-transition-property: transform; 
            transition-duration: 0.5s; 
            -moz-transition-duration: 1s; 
            -moz-transform: rotateY(30deg);
            -moz-transition-property: transform; 

        width: 200px;
        }
        #movieposters li:hover img { 
        width: 200px;
            -webkit-transform: rotateY(0deg); 
            -moz-transform: rotateY(0deg);
        }
    </style>
</head>
<body style="height: 100%" class="bluegradient">
    <ul id="movieposters">
        <li>
            <img src="http://fc02.deviantart.net/fs36/i/2008/252/6/1/House_MD_DVD_covers_by_kdaver.jpg"/>
        </li>
    </ul>
</body>

要在Chrome中看到所需的效果。在Firefox中，-moz-transition-duration似乎没有效果。悬停时的透视和旋转值会发生变化，但不会显示任何动画。

知道为什么吗？我正在使用最新版本的Firefox（10.0.2）。

Answer 1

值为transform时出现问题，在Mozilla中，它的前缀是-moz-transform。

#movieposters li img {
    -moz-transition-property: -moz-transform  
}

这是小提琴：
http://jsfiddle.net/cadence96/82C2N/1/

-moz-transition-duration不工作？

1 个答案: