jQuery css 多个 Transform 属性不起作用

Question

谁能给我解释一下如何让多个 Transform 属性在 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

您在 translate(60px,25px) 中缺少 PX

$('.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)'
});

使用更好的方法和 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>