2014-09-29 124 views
1

在所有瀏覽器上,下面的代碼運行良好,但它不在Safari中。我也無法在Stack上找到這樣的好回答問題,我錯過了什麼?在Safari中旋轉CSS3轉換

http://jsfiddle.net/pw13yd3x/1/

.containerLinksBlock { 
    background-color:red; 
    width:100px; 
    height:100px; 
    -ms-transition: border-radius 0.6s, transform 1.6s; 
    -webkit-transition:border-radius 0.6s, transform 1.6s; 
    -o-transition: border-radius 0.6s, transform 1.6s; 
    transition:border-radius 0.6s, transform 1.6s; 
} 
.containerLinksBlock:hover { 
    border-radius:0px 42px 0px 42px; 
    -ms-transform: rotate(420deg); 
    -webkit-transform: rotate(420deg); 
    -o-transform: rotate(420deg); 
    transform: rotate(420deg); 
} 

回答

2

您需要添加-webkit前綴的轉換了。

-webkit-transition:border-radius 0.6s, -webkit-transform 1.6s; 
+0

啊哈,原來完整的正確的代碼(也適用於其他瀏覽器)是:http://jsfiddle.net/pw13yd3x/2/ – 2014-09-29 16:50:42

+1

呀,看http://caniuse.com/#feat=css-轉換和http://caniuse.com/#feat=transforms2d。 – OrionMelt 2014-09-29 17:02:45