Rotation d'une balise span

[Nenex]

Salut

 

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

 

 

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é 27 Juin 2016 par Nenex

[sparh]

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é 28 Juin 2016 par sparh

[Nenex]

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

[Nenex]

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é 5 Juillet 2016 par Nenex