Faire pivoter du texte lors d'un clic sur un événement

Je dois faire pivoter un texte sous différents angles lors d'un clic.Faire pivoter du texte lors d'un clic sur un événement

J'ai besoin de deux boutons, un pour déplacer le texte dans le sens des aiguilles d'une montre et l'autre pour déplacer le texte dans le sens inverse des aiguilles d'une montre.

Source

2010-11-17 Chauhan

S'il vous plaît ne pas marquer comme '[php]', puisque PHP ne peut pas être utilisé à cette fin. CSS, d'autre part, peut. En utilisant des tags appropriés, vous obtiendrez de meilleures réponses. –

celui-ci travaille pour vous: http://stackoverflow.com/questions/37452477/rotate-div-text-after-clicking-on-button-using-jquery-and-css –

D'abord, read an article sur l'utilisation de CSS3 transforme pour faire pivoter le texte.

utiliser JavaScript pour vous inscrire, cliquez sur les boutons gestionnaires.
Dans vos gestionnaires de clics, utilisez JavaScript pour modifier directement les attributs CSS nécessaires sur le texte en question ou appliquer une nouvelle classe CSS basée sur un angle calculé (avec des classes CSS prédéfinies pour chaque angle que vous souhaitez prendre en charge).

Source

2010-11-17 07:14:15 Phrogz

J'ai une étude sur la rotation en utilisant css mais je Lorsque l'utilisateur clique sur le bouton son mouvement dans le sens des aiguilles d'une montre à un angle particulier – Chauhan

JavaScript s'exécute 'au moment de l'exécution' sur le navigateur Web du visiteur. Les pages Web peuvent être dynamiques. Lorsque l'utilisateur clique sur le bouton, JavaScript manipule les propriétés des objets sur la page et le navigateur met à jour le résultat immédiatement pour l'utilisateur. Cela ne retourne pas au serveur. – Phrogz

Vous pouvez trouver cet article utile: http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html – Phrogz

jQuery Animations qui va faire à peu près tout ce que vous voulez

Source

2010-11-17 07:14:59

wow, animation jquery déjà si compatible avec css3 – wizztjh

essayez ceci:

html:

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

css (conseil: utilise une transformation d'origine pour contrôler le point d'ancrage de rotation, ici utilisé uniquement pour le 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 sur le document prêt:

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

vérifier ici: http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/2/

mise à jour: chaque clic incréments 20degrees: http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/5/

Source

2010-11-17 07:57:17

Bonjour J'ai essayé ce code il suffit de déplacer le texte une fois lorsque nous cliquons sur le bouton de rotation.J'ai besoin quand quand je clique première fois son mouvement 20 degrés d'augmentation supplémentaire sur la deuxième fois de cliquer – Chauhan

cela le fera alors http://jsfiddle.net/SebastianPataneMasuelli/YZY8J/4/ –

cela fonctionne seulement sur -webkit, mais vous avez l'idée, aussi, vous n'avez plus besoin du css plus –

Je donne la réponse de mon question.I trouver dehors le exactement ce que je veux juste à cause de vous les gars. Vous m'avez tous aidé beaucoup.

Merci

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

Source

2010-12-08 05:49:12 Chauhan

Faire pivoter du texte lors d'un clic sur un événement

Répondre

Questions connexes