Firefox RotateY轉換不起作用

我有一個頁面，顯示可以通過jQuery調整大小的人的圖片。我使用的是一個精靈圖像，顯示3個正方形，當您選擇/懸停它們時會發生變化。我正在使用CSS3 Transition & Transform（RotateY）爲動畫改變。轉換和轉換適用於Chrome（v22），但不適用於Firefox（v16）。Firefox RotateY轉換不起作用

我創建的jsfiddle例如：http://jsfiddle.net/WPEbW/7/

<div id="divOptions" runat="server" style="padding: 0 10px; margin: 10px; overflow: hidden; zoom: 1"> 
    <div style="float: left"> 
     <div id="divSmallImage" runat="server" class="ResizeImages Small" title="Small"> 
     </div> 
     <div id="divMediumImage" runat="server" class="ResizeImages Medium Selected" title="Medium"> 
     </div> 
     <div id="divLargeImage" runat="server" class="ResizeImages Large" title="Large"> 
     </div> 
    </div> 
</div> 

.ResizeImages { cursor: pointer; display: inline-block; background-position: 0; -moz-transform:rotateY(0deg) } 
.ResizeImages:hover { box-shadow: #CCC 1px 1px 5px; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } 
.ResizeImages.Selected { -webkit-transition: background-position 0 .4s,-webkit-transform 1s; -webkit-transform: rotateY(180deg); -moz-transition: background-position 0 .4s,-moz-transform 1s; -moz-transform: rotateY(180deg); -o-transition: background-position 0 .4s,-o-transform 1s; -o-transform: rotateY(180deg); transition: background-position 0 .4s,transform 1s; transform: rotateY(180deg); } 
.ResizeImages.Small { background: url('https://www.new-innov.com/RMSImages/square_sprite.png') 0 0 no-repeat; width: 12px; height: 12px; } 
.ResizeImages.Small:hover { background-position: 0 -12px; } 
.ResizeImages.Small.Selected { background-position: 0 -24px; } 
.ResizeImages.Medium { background: url('https://www.new-innov.com/RMSImages/square_sprite.png') -12px 0 no-repeat; width: 16px; height: 16px; } 
.ResizeImages.Medium:hover { background-position: -12px -16px; } 
.ResizeImages.Medium.Selected { background-position: -12px -32px; } 
.ResizeImages.Large { background: url('https://www.new-innov.com/RMSImages/square_sprite.png') -28px 0 no-repeat; width: 20px; height: 20px; } 
.ResizeImages.Large:hover { background-position: -28px -20px; } 
.ResizeImages.Large.Selected { background-position: -28px -40px; } 

$(document).ready(function() { 
    function SetSize(selectedImage) { 
     if (typeof selectedImage !== 'undefined') { 
      $('.ResizeImages.Selected').removeClass('Selected'); 
      $(selectedImage).addClass('Selected'); 
     } 
    } 
    SetSize(); 
    $('.ResizeImages').click(function() { 
     SetSize(this); 
    }); 
});

我相信，過渡和轉換，我應該使用在Firefox工作，但不知道爲什麼他們沒有。

由於提前，
-Aaron

來源

2012-11-02 Airn5475

感謝@Boris Zbarsky，我能解決我自己的問題。我闡明瞭轉換，而不是試圖使用該類的簡寫版本。

我更新了的jsfiddle例如：http://jsfiddle.net/WPEbW/10/

這裏的CSS只是唯一的I類變更：

.ResizeImages.Selected { 
    -webkit-transition-property: background-position, -webkit-transform; 
    -webkit-transition-duration: 0s, 1s; 
    -webkit-transition-delay: .4s, 0s; 
    -webkit-transform: rotateY(180deg); 
    -moz-transition-property: background-position, -moz-transform; 
    -moz-transition-duration: 0s, 1s; 
    -moz-transition-delay: .4s, 0s; 
    -moz-transform: rotateY(180deg); 
    -o-transition-property: background-position, -o-transform; 
    -o-transition-duration: 0s, 1s; 
    -o-transition-delay: .4s, 0s; 
    -o-transform: rotateY(180deg); 
    transition-property: background-position, transform; 
    transition-duration: 0s, 1s; 
    transition-delay: .4s, 0s; 
    transform: rotateY(180deg); 
}

來源

2012-11-05 15:03:08 Airn5475

你不需要拼出來。只需要'0'而不是'0'... –

@BorisZbarsky我不跟着你。我所指的'0'是爲了位置而不是時間。 – Airn5475

你原來的CSS有'transition：background-position 0 0.4s'之類的東西。這些值有屬性名稱，轉換延遲和轉換持續時間。所以對於一個兼容的CSS解析器來說，0應該是0，不能丟棄聲明。您的重寫CSS正確使用0作爲轉換持續時間，因此它可以正常工作。但它也可以用原來的CSS代替0來代替0。 –

background-position 0 .4s不是有效<single-transition>截至http://dev.w3.org/csswg/css3-transitions/#single-transition所以整個-moz-transition規則得到由CSS解析器丟棄定義。如錯誤控制檯所示：

[03：47：02.876]解析'-moz-transition'的值時出錯。聲明下降了。 @http://fiddle.jshell.net/WPEbW/7/show/:18

它適用於Chrome，因爲Chrome不幸實際上並未實現正確解析過渡值的規範。

來源

2012-11-03 07:47:57

+1感謝您的幫助。我能夠想出我發佈的解決方案。 – Airn5475

Firefox RotateY轉換不起作用

回答

相關問題