web-dev-qa-db-fra.com

Comment faire pivoter + retourner un élément avec CSS

La propriété de transformation vous permet de faire pivoter ou retourner, mais comment faire les deux en même temps? Dis que je veux faire pivoter un élément de 90 degrés et le retourner horizontalement? Les deux sont terminés avec la même propriété, donc la dernière remplace la première. Voici un exemple de violon pour plus de commodité:

http://jsfiddle.net/DtNh6/

transform: rotate(90deg);
transform: scaleX(-1);
csscss3css-transforms
21
chinabuffet

J'ai tripoté jsfiddle, et cela a fonctionné:

$('#photo').css('transform', 'rotate(90deg) scaleX(-1)');

Pour le relier à votre question, le CSS résultant ressemble à

transform: rotate(90deg) scaleX(-1);
32
James Green

Les propriétés peuvent être délimitées par des espaces, comme ceci.

transform: rotate(90deg) scaleX(-1);
11
Austin Brunkhorst

Pour les générations futures, une réponse plus complète:

.rotate2{ /*leaning left <- */
    -webkit-transform:rotate(270deg);
    -moz-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    transform:rotate(270deg);
}
.rotate4{ /*upside down*/
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
}
.rotate6{ /*leaning right -> */
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
}
.rotate8{ /*vertical flip*/ /*upside-down mirror*/
    -moz-transform: scale(1, -1);
    -webkit-transform: scale(1, -1);
    -o-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1);
}
.rotate10{ /*vertical flip*/ /*upside-down*/
    -moz-transform: rotate(90deg) scale(1, -1);
    -webkit-transform: rotate(90deg) scale(1, -1);
    -o-transform: rotate(90deg) scale(1, -1);
    -ms-transform: rotate(90deg) scale(1, -1);
    transform: rotate(90deg) scale(1, -1);
}
.rotate12{ /*horizontal flip*/ /*left-right mirror*/
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
.rotate14{ /*horizontal flip*/ /*left-right mirror*/
    -moz-transform: rotate(90deg) scale(-1, 1);
    -webkit-transform: rotate(90deg) scale(-1, 1);
    -o-transform: rotate(90deg) scale(-1, 1);
    -ms-transform: rotate(90deg) scale(-1, 1);
    transform: rotate(90deg) scale(-1, 1);
}
6
Kaan Soral

Regardez ça:

element {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

pour plus d'informations, voici le lien: https://css-tricks.com/snippets/css/flip-an-image/

0
Owaiz Yusufi