CSS: Varier la rotation sur le site Wordpress?

Question

J'ai essayé toutes sortes de codes, mais je n'arrive pas à le comprendre. Ce que j'aime voir, c'est que les différents messages avec vignette ont différents degrés de rotation.

Voici le code css que je tryed:

.hentry .post-thumb li:nth-child(2n){ 
    -moz-transform: rotate(3deg); 
    -webkit-transform: rotate(3deg); 
    -o-transform: rotate(3deg); 
    transform: rotate(3deg); 
} 

.hentry .post-thumb li:nth-child(3n){ 
    -moz-transform: rotate(-3deg); 
    -webkit-transform: rotate(-3deg); 
    -o-transform: rotate(-3deg); 
    transform: rotate(-3deg); 
} 

Vous pouvez voir le site here.

Merci

Answer 1

Le CSS vous fournissez dans votre question ne correspond pas au HTML sur le site que vous liez. Il n'y a pas de li descendant d'un élément .post-thumb.

Je pense que vous ne comprenez pas comment le nth-child() pseudo-class fonctionne, cependant. Vous devriez faire quelque chose comme ceci:

.hentry:nth-child(2n) .post-thumb img { transform: rotate(3deg); /* etc. */ } 
.hentry:nth-child(3n) .post-thumb img { transform: rotate(-3deg); /* etc. */ } 

Cela tournera les vignettes de chaque seconde après 3 degrés vers la droite (à savoir les 2e, 4e, 6e enfant etc., de la .posts div), et toutes les vignettes de chaque troisième poste 3 degrés vers la gauche (c.-à-d. le 3e, 6e, 9e etc. enfant du .posts div).

Je ne suis pas sûr si 2n et 3n sont tout à fait l'expression que vous prévoyez soit, cependant. Peut-être Sitepoint's "Understanding :nth-child Pseudo-class Expressions" aidera.