Rotar texto al hacer clic en evento

Necesito rotar un texto en diferentes ángulos al hacer clic en el botón.Rotar texto al hacer clic en evento

Necesito dos botones, uno para mover el texto en sentido horario y otro para mover el texto en sentido antihorario.

2010-11-17 Chauhan

Por favor, no etiquetar esto como '[php] ', a partir de PHP no se puede usar para este propósito. CSS, por otro lado, puede. El uso de etiquetas apropiadas le dará mejores respuestas. –

este funciona para usted: http://stackoverflow.com/questions/37452477/rotate-div-text-after-clicking-on-button-using-jquery-and-css –

En primer lugar, read an article sobre el uso de CSS3 se transforma para rotar el texto.

Usar JavaScript para inscribirse hacer clic manipuladores en sus botones.
En sus manejadores de clics, use JavaScript para modificar directamente los atributos CSS necesarios en el texto en cuestión o aplicar una nueva clase CSS basada en un ángulo calculado (con clases CSS predefinidas para cada ángulo que desee).

Fuente

2010-11-17 07:14:15 Phrogz

Tengo un estudio sobre la rotación usando CSS, pero necesita esto en tiempo de ejecución para los visitantes. Cuando el usuario hace clic en el botón, se mueve en el sentido de las agujas del reloj en un ángulo particular – Chauhan

JavaScript ejecuta 'en tiempo de ejecución' en el navegador web del visitante. Las páginas web pueden ser dinámicas. Cuando el usuario hace clic en el botón, JavaScript manipula las propiedades de los objetos en la página y el navegador actualiza el resultado de inmediato para el usuario. Esto no vuelve al servidor. – Phrogz

Puede encontrar este artículo útil: http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html – Phrogz

jQuery Animations que va a hacer casi cualquier cosa que quieren

Fuente

2010-11-17 07:14:59

wow, jquery animación ya es tan compatible con css3 – wizztjh

probar esto:

html:

<input id="rotateBtn" type="submit" value="rotate"/> 
<div class="textToRotate">text to be rotated</div>

css (consejo: uso transformar origen para controlar la rotación punto de anclaje, aquí se usa solo para webkit)

.rotate { 
-moz-transform: rotate(7.5deg); /* FF3.5+ */ 
-o-transform: rotate(7.5deg); /* Opera 10.5 */ 
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */ 
-webkit-transform-origin: 0 0 ; 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /*IE6,IE7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */ 
}

jQuery en el documento listo:

$('#rotateBtn').click(function() { 
    $('.textToRotate').addClass('rotate'); 
});

verificarlo aquí: http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/2/

actualización: incrementos de 20 grados cada clic: http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/5/

Fuente

2010-11-17 07:57:17

Hola He intentado con este código simplemente mueve el texto una vez cuando hacemos clic en el botón de rotación. Necesito cuando cuando hago clic la primera vez su movimiento 20 grados más aumenta en la segunda vez que hace clic en – Chauhan

, esto lo hará luego http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/4/ –

solo funciona en -webkit, pero ya entiendes, ya no necesitas ninguno de los css –

estoy dando la respuesta de mi propia question.I encontrar exactamente lo que quiero solo por ustedes. Ustedes me ayudaron mucho.

Gracias

 <style type="text/css" media="screen"> 
      .square { 
       width: 144px; 
       height: 144px; 
       background: #fff; 
       margin-right: 48px; 
       float: left; 
        } 

      .transformed { 
      -webkit-transform: rotate(15deg) scale(1.25, 0.5); 
      -moz-transform: rotate(15deg) scale(1.25, 0.5); 
      transform: rotate(15deg) scale(1.25, 0.5); 
         } 
      </style> 
      <script type="text/javascript"> 

      function change(txt){ 
        var d = document.getElementById('derg').value || 0; 

        var dd = parseInt(d)+parseInt(txt); 

        document.getElementById('derg').value=dd; 
        var a=dd+'deg'; 


        document.getElementById('tdiv4').style.MozTransform = 'rotate('+a+')'; 
     } 

       </script> 




      <div id="tdiv4" class="square" >this is tdiv4</div> 

      <input type="hidden" value="" id="derg"> 
     <input type="button" onclick="change(15)" value="change"/>

Fuente

2010-12-08 05:49:12 Chauhan

Rotar texto al hacer clic en evento

Respuesta

Cuestiones relacionadas