javascript - rote - CSS3: ¿Cómo rotar y escalar un img al mismo tiempo?

rotar imagen con javascript

Question

Estoy muy confundido. ¿Por qué no puedo usar la escala y rotar al mismo tiempo? He intentado esto, pero no funciona:

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

Intenté jQuery, pero no funciona ni:

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

¿Cómo podría escalar un img? Y cuando hago clic con el botón derecho, gire 90 grados.

Answer 1

Bueno, sobre la base de la respuesta de Adeneo, una que incluye a todos los browers capaces de transformar 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%;
}

Ver extenso JS Fiddle .

Answer 2

Puede rotar una imagen con CSS utilizando la propiedad de transform con un valor de 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/-logo.png" />

Al aplicar la transform en varias líneas, es como cualquier otra propiedad CSS, y se sobrescribe, por lo que solo se usa la última línea, al igual que con algo como:

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

solo se aplicaría la última, por lo que deberá colocar todas las transformaciones en una sola transform .