RSS
RSS
Top Sites !



Votez toutes les 2 heures pour faire connaître Sweet Swirl ! Sachez que si vous faîtes ça on vous aimera beaucoup. ♥ (mais on vous aime déjà ne vous inquiétez pas)




 
Le Deal du moment :
Xiaomi Mi Smart Camera 2K Standard Edition (design ...
Voir le deal
11.39 €

Partagez
 

 Rotations -

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Auteur
Message


Keylha Messages : 54
Date d'inscription : 18/01/2014
Localisation : CHEZ MWA.
Keylha
Cookie
✘ Ven 30 Jan - 21:29
Yo !
Me revoici pour un nouveau petit tutoriel de codage sur ... L'angle, les rotations, bref appelez ça comme vous voulez, retenez juste que ça tourne ! 8D Ce sera pas hyper long, je fais juste ce petit tutoriel vite fait dans l'espoir d'aider quelques personnes et on l'avait déjà demandé aussi (Coucou Mitsu) donc voilà. 8D
Je précise aussi qu'il est toujours mieux d'avoir un minimum de base en CSS, même si je précise tout, c'est plus simple en fait. N'hésitez pas à me dire si ce n'est pas compréhensible oukwa.

Donc, donc, on va apprendre à faire ça:

Pour commencer, ouvrez une page HTML (j'ai pas testé mais il me semble pas que le code qui génère la rotation marche dans les messages de forum comme SS) et créons la base de notre code :

Code:
<meta http-equiv="Content-Type" content="text/html;charset=utf8" />
<style type="text/css">

.rond{}
</style>

<div class="rond"></div>

Moi j'ai choisi de faire un rond, parce que les ronds cay koul.

Code:
<meta http-equiv="Content-Type" content="text/html;charset=utf8" />
<style type="text/css">

  .rond{
  width: 150px;
  height: 150px;
  border-radius: 75px;
  background: url(http://image.noelshack.com/fichiers/2015/05/1422646556-forest.png);}

</style>

<div class="rond"></div>



Pour la petite explication. Pour faire un rond on est obligés de mettre la même hauteur (height) et la même largeur (width), 150 pour moi.
Ensuite pour ordonner que l'on veut un rond (paske là c'est un carré en fait), on utilise la propriété "border-radius". Alors, alors, si vous êtes curieux vous vous apercevez que si vous prenez les même largeurs que moi et que vous mettez par exemple ... 20 en border-radius, on a un carré au bord arrondis. Sacrilège. D: Du coup, pour être sûrs d'avoir un rond on va mettre comme valeur la moitié de la largeur/hauteur. (150/2=75)

Aloors. :3
Là on rentre dans le vif du sujet. On va utiliser l'effet hover; l'hover c'est quoi ? C'est simple, par exemple quand vous passez votre curseur sur un titre et que ce titre devient rouge, c'est grâce à l'hover. L'hover est magique, l'hover est puissant. èué
Ici, comme on va avoir un rond qui tourne lorsqu'on passe le curseur dessus on va utiliser quoi ? ... L'HOVER. 8D

Pour créer l'hover c'est simple, il faut juste rajouter ça à la suite de notre code ! :3
Code:
  .rond:hover{ }

Rien de compliqué ! Tout ce qui ne change pas (la largeur par exemple), on ne vas pas le remettre dans le hover. Ici en l’occurrence, la seule chose qui vas changer c'est l'angle de notre rond. o/

Voici le code que l'on va utiliser:

Code:
-webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  -ms-transform:rotate(0deg);

Là, comme vous le voyez, on est à 0 degré. Et il ne sert foutrement à rien comme ça, le mettre dans notre premier code (.rond) serait inutile vu ... Que bah notre rond est déjà à 0 degré de base. Du coup, vu qu'on veut lui faire faire un tour sur lui même on va mettre combien de degré ? 8D (J'aime parler à des gens qui n'existent pas) ... 360 o/
Enfin moi j'ai mit 360, mais vous faites comme vous voulez hein. 8D 720 si vous voulez que votre rond tourne à fond par exemple.
Et vu que le rond tourne quand on passe la souris dessus, on va donc mettre ce joli petit code dans notre petit hover.

Code:
  <style type="text/css">
  .rond{
  width: 150px;
  height: 150px;
  border-radius: 75px;
  background: url(http://image.noelshack.com/fichiers/2015/05/1422646556-forest.png);}

  .rond:hover{
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg); }

</style><div class="rond"></div>

Mais là si vous essayez vous allez vous dire "Mais wtf, c'est quoi cette merde, ça marche pas", et bien il nous reste un code ESSENTIEL à mettre. 8D
Si vous faîtes un peu de CSS vous devez l'avoir trouver depuis longtemps. (Mais je pense aussi que vous seriez pas là non plus. e_e)

Code:
 -webkit-transition-duration:500ms;
  -moz-transition-duration:500ms;
  -o-transition-duration:500ms;
  transition-duration:500ms;

Voilà le Saint Code. Alooors, ce code sert à faire la transition, je m'explique.
Reprenons notre exemple du titre qui change de couleur quand on passe la souris dessus, sans ce code, la transition n'existe pas, c'est instantané, c'est brutal c'est assez moche.
Du coup, à chaque fois que l'on utilise l'hover, on utilise de code.
Les 500ms, corresponde à la durée, vous pouvez changer mettre 1s, 2s, 10s (mais ça va être chiant), comme vous voulez.

Ici, ce code correspond plus à la vitesse de rotation du rond.
Notez que comme la transition doit se faire comme à l'allée qu'au retour on doit mettre ce code dans nos deux parties. (rond et rond:hover) D'ailleurs, si vous aimez expérimentez vos codes dans votre petit coin, si on ne met ce code qu'au hover, le rond ne tourne pas quand on retire la souris.

Code:
  .rond{
  width: 150px;
  height: 150px;
  border-radius: 75px;
  background: url(http://image.noelshack.com/fichiers/2015/05/1422646556-forest.png);
  -webkit-transition-duration:500ms;
  -moz-transition-duration:500ms;
  -o-transition-duration:500ms;
  transition-duration:500ms;}
  
  .rond:hover{
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  -webkit-transition-duration:500ms;
  -moz-transition-duration:500ms;
  -o-transition-duration:500ms;
  transition-duration:500ms;}



  
</style><div class="rond"/style="background-position: center;"></div>

Voilà, moi j'ai rajouté un "background-position: center", pour centrer mon fond. :3

Notez que ça ne se limite pas qu'au rond vous pouvez faire tourner pleins de trucs. 8D




Voilà, voilà. N'hésitez pas à poster vos questions sur ce topic ou par mp' si vous ne comprenez pas ! :'D
Revenir en haut Aller en bas
https://testkeylha.kanak.fr
 

Rotations -

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
testkeylha :: esrhydftgj :: Patates.-