49

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

.rotate-img{
    -webkit-transform:scale(2,2);
    -webkit-transform:rotate(90deg);
    margin-left:20%;
    margin-top:10%;
}

我尝试了 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>

我怎么能缩放一个img，当我点击右键然后旋转90度。

4

4 回答 4

80

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

在多行上应用transform时，它就像任何其他 CSS 属性一样，并且会被覆盖，因此只使用最后一行，就像这样：

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

只有最后一个适用，因此您需要将所有转换放在一个中transform。

于 2013-04-02T15:45:53.933 回答
14

好吧，建立在 adeneo 的答案之上，其中包括所有能够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%;
}

请参阅扩展的JS Fiddle。

于 2014-03-27T21:47:13.307 回答
7

你不需要单独编写代码来使用旋转和缩放你可以使用它看起来像这样：

变换：缩放（1.3）旋转（7度）；

于 2019-12-08T10:21:35.053 回答
2

您可以同时缩放和旋转，但您必须在同一行上进行，否则您会用新值覆盖 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" />

另请注意，该元素上的任何现有样式都将被覆盖，除非您先将该样式保存到（字符串）变量中，然后将新样式添加（附加或连接）到该保存的变量中，然后将整个变量添加回html元素。

于 2019-08-09T10:06:22.473 回答