CSS3：如何同时旋转和缩放img？ [英] CSS3: How to rotate and scale an img at the same time?

问题描述

我很困惑。为什么我不能同时使用缩放和旋转？我试过这个，但它不工作：

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%;
}

我试过jQuery，但是不工作：

I tried jQuery, but does not work neither:

<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>

我如何缩放img，当我点击右键，然后旋转90度。

How could I scale an img and when I clic the right click then rotate 90 deg.

推荐答案

您可以使用 transform c $ c> rotate（** deg） value

You can rotate an image with CSS using the transform property with a rotate(**deg) value

.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" />

在多行上应用 transform 时，它像任何其他CSS属性，它被覆盖，就像下面这样：

When applying transform on 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 :

.myclass {
    top: 100px;
    top: 400px;
}

只会应用最后一个，因此您需要将所有转换在一个转换。

only the last one would apply, so you'll need to put all the transformations in one transform.

这篇关于CSS3：如何同时旋转和缩放img？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！