web-dev-qa-db-fra.com

CSS3: Comment faire pivoter et mettre à l'échelle une img en même temps?

Je suis très confus. Pourquoi ne puis-je pas utiliser l'échelle et la rotation en même temps? J'ai essayé ça, mais ça ne marche pas:

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

J'ai essayé jQuery, mais ne fonctionne pas non plus:

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

Comment pourrais-je redimensionner un img et quand je clique sur le clic droit puis fait pivoter de 90 degrés.

javascriptjquerycsscss3css-transforms
29
user2195741

Vous pouvez faire pivoter une image avec CSS à l'aide de la propriété transform avec une valeur 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" />

Lorsque vous appliquez transform sur plusieurs lignes, c'est comme n'importe quelle autre propriété CSS, et elle est écrasée de sorte que seule la dernière ligne est utilisée, tout comme avec quelque chose comme:

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

seule la dernière s'appliquerait, vous devrez donc mettre toutes les transformations dans un transform.

63
adeneo

Eh bien, en s'appuyant sur la réponse d'Ateneo, qui inclut tous les navigateurs capables de transformer CSS .

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

Voir étendu JS Fiddle .

13
Volker E.

Vous pouvez mettre à l'échelle et faire pivoter en même temps, mais vous DEVEZ le faire sur la même ligne, sinon vous remplacez la valeur prievius par la nouvelle valeur.

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

Notez également que tout style déjà existant sur cet élément sera écrasé, sauf si vous enregistrez ce style dans une variable (chaîne) d'abord et ajoutez (ajoutez ou concaténez) les nouveaux styles à cette variable enregistrée, puis rajoutez la variable entière sur le élément html.

0
Sebastian Norr