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を持つプロパティを使用して、CSS で画像を回転できます。rotate(**deg)

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

最後の 1 つだけが適用されるため、すべての変換を 1 つにまとめる必要がありますtransform。

于 2013-04-02T15:45:53.933 に答える
7

回転とスケールの両方を使用するためにコードを個別に記述する必要はありません。次のように使用できます。

変換: スケール (1.3) 回転 (7 度);

于 2019-12-08T10:21:35.053 に答える