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

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

演示使用更好的方法和观察

$('.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多个Transform属性不起作用

1 个答案: