web-dev-qa-db-ja.com

CSS3：imgを同時に回転および拡大縮小する方法は？

私はとても混乱しています。なぜスケールと回転を同時に使用できないのですか？私はこれを試しましたが、うまくいきません：

.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度回転させることができますか。

javascriptjquerycsscss3css-transforms
29
user2195741

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

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

63
adeneo

さて、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 を参照してください。

13
Volker E.

同時に拡大縮小と回転を行うことができますが、同じ行でそれを行う必要があります。そうしないと、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" />

また、最初にそのスタイルを（string-）変数に保存し、その保存した変数に新しいスタイルを追加（追加または連結）してから変数全体を再び追加しない限り、その要素の既存のスタイルが上書きされることに注意してくださいhtml要素。

0
Sebastian Norr