jQuery css 多个变换属性不起作用

Question

任何人都可以向我解释如何在 jQuery.css() 中使用多个 Transform 属性吗？

我已经设置了一个 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>

jQuery css 多个变换属性不起作用

jQuery css multiple Transform attributes wont work

css

jquery

transformation