jQuery CSS3：如何同时旋转和缩放 img？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15768315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3: How to rotate and scale an img at the same time?
提问by adeneo
I'm very confused. Why can't I use scale and rotate at the same time? I've tried this, but it does not work:
我很困惑。为什么不能同时使用缩放和旋转？我试过这个，但它不起作用：
.rotate-img{
-webkit-transform:scale(2,2);
-webkit-transform:rotate(90deg);
margin-left:20%;
margin-top:10%;
}
I tried jQuery, but does not work neither:
我试过 jQuery，但也不起作用：
<style>
.zoom{
-webkit-transform:scale(2,2);
margin-left:20%;
margin-top:10%;
}
</style>
<script>
$(document).ready(function(){
$("img").dblclick(function(){
$(this).addClass("zoom");
$(this).contextmenu(function(){
$(this).css("-webkit-transform","rotate(90deg)");
return false;
})
});
})
</script>
How could I scale an img and when I clic the right click then rotate 90 deg.
我怎么能缩放一个 img，当我点击右键然后旋转 90 度。
回答by adeneo
You can rotate an image with CSS using the transformproperty with a rotate(**deg)value
您可以使用transform带有rotate(**deg)值的属性旋转带有 CSS 的图像
.rotate-img {
-webkit-transform : rotate(90deg) scale(0.2); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform : rotate(90deg) scale(0.2); /* IE 9 */
transform : rotate(90deg) scale(0.2); /* Firefox 16+, IE 10+, Opera */
left : -200px;
position: relative;
}<img class="rotate-img" src="https://appharbor.com/assets/images/stackoverflow-logo.png" />When applying transformon multiple lines, it's like any other CSS property, and it gets overwritten so only the last line is used, just like with something like :
transform在多行上应用时，它就像任何其他 CSS 属性一样，它会被覆盖，因此只使用最后一行，就像这样：
.myclass {
top: 100px;
top: 400px;
}
only the last one would apply, so you'll need to put all the transformations in one transform.
只有最后一个适用，因此您需要将所有转换放在一个transform.
回答by Volker E.
Well, building on top of adeneo's answer, one that includes all browers capable of CSS transform.
好吧，建立在 adeneo 的答案之上，其中包括所有能够进行CSS 转换的浏览器。
.rotate-img {
-webkit-transform: rotate(90deg) scale(2.2); /* Chrome 4+, Op 15+, Saf 3.1, iOS Saf 3.2+ */
-moz-transform: rotate(90deg) scale(2.2); /* Fx 3.5-15 */
-ms-transform: rotate(90deg) scale(2.2); /* IE 9 */
-o-transform: rotate(90deg) scale(2.2); /* Op 10.5-12 */
transform: rotate(90deg) scale(2.2); /* Fx 16+, IE 10+ */
margin: 10% 0 0 20%;
}
See extended JS Fiddle.
请参阅扩展JS Fiddle。
回答by Sebastian Norr
You can scale & rotate at the same time, but you HAVE to do it on the same line, otherwise you overwrite the prievius value with the new value.
您可以同时缩放和旋转，但必须在同一行上进行，否则您会用新值覆盖 prievius 值。
let htmlElement = document.getElementById("rotate-img");
let scaleX = -0.3;
let scaleY = 0.2;
let angle = 45 ;
// NOTICE!! THE BACK-TICKS, not regular quotes. Will decode variables inside before printing.
// Code for Safari
htmlElement.style.WebkitTransform = `scale( ${scaleX}, ${scaleY} ) rotate( ${angle}deg )`;
// Code for IE9
htmlElement.style.msTransform = `scale( ${scaleX}, ${scaleY} ) rotate( ${angle}deg )`;
// Standard syntax
htmlElement.style.transform = `scale( ${scaleX}, ${scaleY} ) rotate( ${angle}deg )`; <img id="rotate-img" src="https://appharbor.com/assets/images/stackoverflow-logo.png" />Also notice that any already existing style on that element will be overwritten, unless you save that style into a (string-)variable first & add (append or concatenate) the new styles to that saved variable & then add the whole variable back onto the html-element.
另请注意，该元素上任何已存在的样式都将被覆盖，除非您先将该样式保存到（字符串）变量中并将新样式添加（附加或连接）到该保存的变量中，然后将整个变量添加回html 元素。
回答by Hos715
You do not need to write code separately to use both rotate and scale u can use it look like this :
你不需要单独编写代码来使用旋转和缩放你可以像这样使用它：
transform: scale(1.3) rotate(7deg);
变换：缩放（1.3）旋转（7度）；
