jQuery的CSS多個變換屬性不會工作

Question

任何人都可以解釋我如何獲得多個變換屬性在jQuery.css（）中工作？

我已成立一個Fiddle來說明我的意思

這不會工作：

$('.transformMe').css({ 
    'border':'5px dotted blue', 
    '-webkit-transform': 'scale(5) translate(60,25)', 
    '-moz-transform': 'scale(5) translate(60,25)', 
    '-ms-transform': 'scale(5) translate(60,25)', 
    '-o-transform': 'scale(5) translate(60,25)', 
    'transform': 'scale(5) translate(60,25)' 
}); 

這將導致一個新的邊界，但轉換是由瀏覽器忽略。

這個工程：

$('.transformMe2').css({ 
    'border':'5px double green', 
    '-webkit-transform': 'scale(5)', 
    '-moz-transform': 'scale(5)', 
    '-ms-transform': 'scale(5)', 
    '-o-transform': 'scale(5)', 
    'transform': 'scale(5)' 
}); 

我如何可以設置多個與jQuery變換屬性？

Answer 1

你缺少PX在translate(60px,25px)

$('.transformMe').css({ 
    'border':'5px dotted blue', 
    '-webkit-transform': 'scale(5) translate(60px,25px)', 
    '-moz-transform': 'scale(5) translate(60px,25px)', 
    '-ms-transform': 'scale(5) translate(60px,25px)', 
    '-o-transform': 'scale(5) translate(60px,25px)', 
    'transform': 'scale(5) translate(60px,25px)' 
}); 

DEMO使用更好的計算策略和jQuery

$('.transformMe').addClass("dottedBlue"); 
 

 
$('.transformMe2').addClass("dottedGreen");

.transformMe{ 
 
    width:50px; 
 
    height:50px; 
 
    border:1px solid red; 
 
    position:absolute; 
 
    top:150px; 
 
    left:150px; 
 
} 
 
.transformMe2{ 
 
    width:50px; 
 
    height:50px; 
 
    border:1px solid red; 
 
    position:absolute; 
 
    top:150px; 
 
    left:450px; 
 
} 
 

 
.dottedBlue{ 
 
    border:5px dotted blue; 
 
    -webkit-transform: scale(5) translate(60px,25px); 
 
    -moz-transform: scale(5) translate(60px,25px); 
 
    -ms-transform: scale(5) translate(60px,25px); 
 
    -o-transform: scale(5) translate(60px,25px); 
 
    transform: scale(5) translate(60px,25px) 
 
} 
 
.dottedGreen{ 
 
    border: 5px double green; 
 
    -webkit-transform: scale(5); 
 
    -moz-transform: scale(5); 
 
    -ms-transform: scale(5); 
 
    -o-transform: scale(5); 
 
    transform: scale(5) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="transformMe"></div> 
 
<div class="transformMe2"></div>