Aller au contenu

Rotation d'une balise span


Nenex

Sujets conseillés

Salut

 

J'aimerais mettre l'auteur et la licence des photos sur le coté de l'image, verticalement, comme ceci :

 

1467039167.png

 

J'ai donc fait pivoter mon texte de 90°,  avec comme point d'encrage le coin bas gauche. Seulement mon span ne bouge pas, il reste horizontal.

 

Mon code HTML :

<figure>
	<img src="images/accueil/accueil-01.png" alt="ALT" />
	<span class="img-licence">Auteur et licence</span>
</figure>

Mon code CSS :

.img-licence {
	font-size:0.7em;
	text-align:right;
	font-style:italic;
	-moz-transform-origin: 0% 100%;
	-moz-transform: rotate(90deg);
	-o-transform-origin:  0% 100%;
	-o-transform: rotate(90deg);
	-webkit-transform-origin:  0% 100%;
	-webkit-transform: rotate(90deg);
	transform-origin:  0% 100%;
	transform: rotate(90deg);
}

 

Merci d'avance pour votre aide.

 

Modifié par Nenex
Lien vers le commentaire
Partager sur d’autres sites

Salut
 

figure {
  width:490px;
  height:320px;
  border:1px solid #000;
}

.img-licence {
	font-size:0.7em;
	text-align:right;
	font-style:italic;
	-moz-transform-origin: 100% 0%;
	-moz-transform: rotate(90deg);
	-o-transform-origin:  100% 0%;
	-o-transform: rotate(90deg);
	-webkit-transform-origin:  100% 0%;
	-webkit-transform: rotate(90deg);
	transform-origin: 100% 0%;
	transform: rotate(90deg);
  float:right;
  padding-right:10px;
}

Je sais pas  si c'est parfait mais c'est déjà mieux

Modifié par sparh
Lien vers le commentaire
Partager sur d’autres sites

Merci pour ton aide. Je vais me garder ta solution sous le coude, car je vais faire autrement que comme ça. Je vais tout simplement faire un petit montage avec photoshop. C'est aussi rapide et ça ferra mins de code dans mon fichier CSS. Je sais pas pourquoi j'ai voulu utiliser le CSS pour faire ça :rolleyes:

Lien vers le commentaire
Partager sur d’autres sites

Salut lotirim :) . Si tu veux avoir des réponses je te conseille de faire un nouveau message. Car dans ma discussion, les personne susceptible de pouvoir te répondre ne verront pas ton message.

Modifié par Nenex
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...