CSS3：如何同时旋转和缩放 img？

Question

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:

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

Answer 1

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

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 .

Answer 2

Well, building on top of adeneo's answer, one that includes all browers capable of CSS transform .

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

Answer 3

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

Answer 4

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.

 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.