Me gustaría rotar un objeto de -180 grados a 180 grados a través de transiciones y transiciones CSS3. Esto funciona bien, pero me gustaría controlar la dirección de rotación. ¿Cómo determinar si irá en sentido horario o antihorario?¿Cómo se determina la dirección de rotación en las transiciones CSS3?
0 .. 180 es en el sentido de las agujas del reloj, 0 .. -180 es en el sentido contrario a las agujas del reloj. Entonces, el número positivo gira en el sentido de las agujas del reloj, el negativo, en el otro sentido.
creé un ejemplo de cómo rotar:
<html>
<style type="text/css">
.rotatedDiv {
margin-top: 200px;
margin-left: 200px;
-webkit-transition: -webkit-transform 3s ease-in;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
}
</style>
<body>
<div class="rotatedDiv" onclick="this.style.webkitTransform='rotate(-100deg)'">
This div will do a spin when clicked!
</div>
</body>
</html>
En primer lugar, mostrar div girada. Cuando haces clic en él, girará. Dependiendo del valor, negativo o positivo, girará en sentido antihorario o en sentido horario.
Pero, ¿y si quieres una transición entre 30 y 40 grados, solo en sentido antihorario? – Monokai
Agregué un ejemplo –
Gracias. Al final, se me ocurrió una solución, desencadenada por tu ejemplo. Los grados no están limitados por un mínimo de 0 y un máximo de 360. También puede especificar -720, por ejemplo. De esta forma puede controlar el movimiento en sentido horario y antihorario. – Monokai
Parece que también debe recordar introducir los valores concretos iniciales "de", de lo contrario, el signo de dirección +/- no se comportará bien.
Creo que tendrá que establecer un punto medio en su animación. No he visto nada que te permita especificar en qué dirección va la rotación. – drudge
¿Es eso a través de las propiedades de animación css3? Sí, eso es lo que también pensé, pero me gustaría hacerlo solo con las propiedades simples de transición y transformación css3, si es posible. – Monokai