adHoc.71site.fr

→ Des images qui changent lors du survol de la souris avec un flip (une rotation)

Voilà de la place pour afficher un autre contenu.

du texte, un lien, une image...

L'origine de cette petite recherche est là :

Aiguillé par jac83 et son site. Grand merci à lui !

Toutes mes images sont placées dans un dossier tutoriels/imagettes placé dans le dossier images d'adHoc.

Les règles de style sont dans la partie [style type="text/css"]...[/style]

Elle peut être directement, encadrée de ces balises au début du code source de la page ou de la boîte ou dans un fichier de style additionnel comme c'est le cas ici

Voir son contenu ci dessous :

#f1_container {
	position: relative;
	margin: 10px auto;
	width: 192px; /*largeur images*/
	height: 192px; /*hauteur images*/
	z-index: 1;
	background: transparent; /*couleur de fond*/
	border:1px solid #222222; /*bordure*/
	border-radius:30px; /*arrondis*/
}
#f1_container {
	perspective: 500px;
}
#f1_card {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: all 1.0s linear; /*temps et mode de transition*/
}
#f1_container:hover #f1_card {
	transform: rotateY(180deg); /*rotation verticale*/
	border-radius: 30px; /*arrondis*/
	box-shadow: -5px 5px 5px #111111; /*ombre portée*/
}
.face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}
.face.back { /*attributs face cachée*/
	display: block;
	transform: rotateY(180deg); /*rotation verticale*/
	box-sizing: border-box;
	padding: 10px; /*marges intérieure*/
	color: #ffffff; /*couleur texte*/
	text-align: center; /*alignement*/
	background-color: #217285; /*couleur de fond*/
	opacity:0.9; 
	border-radius:30px; /*arrondis*/
}

La dimension des images ici est de 192px par 192px. Il faut adapter les valeurs à vos images dans le style ci-dessus.

L'effet de transition dure 1.0seconde, cela aussi peut être adapté.

Le mode de la transition est linear. Il y en a d'autres : voir ici par exemple.

Une valeur faible pour la perspective donnera une déformation importante... Vous pouvez tester...

La rotation de 180° s'effectue sur l'axe vertical rotateY(180deg). Voir le tutoriel suivant pour les rotations horizontales.

L'opacité (opacity:0.9;) permet une légère transparence. On voit l'image inversée... c'est amusant mais tous les navigateurs ne l'affichent pas. On peut la supprimer ou mettre opacity:1;

J'ai nommé ce fichier animsurvol_images_flip1.css : Il est placé dans le dossier css des skins et son appel au début du code source est le suivant :

    <link charset="utf-8" href="skin/css/animsurvol_images_flip1.css" rel="stylesheet" />    

Et enfin, ce type de code là où vous souhaitez placer les images :

<div style="margin-right:10px; display: inline-block;">
<div id="f1_container">
<div id="f1_card">
<div class="front face"><img src="images/tutoriels/imagettes/gear.png" />
</div><!-- fin front face -->
<div class="back face center">
<p>Voilà de la place pour afficher un autre contenu.</p>
<p>du texte, un lien, une image...</p>
</div><!-- fin back face center -->
</div><!-- fin f1_card -->
</div><!-- fin f1_container -->
</div>

<div style="margin-right:10px; display: inline-block;">
<div id="f1_container">
<div id="f1_card">
<div class="front face"><img src="images/tutoriels/imagettes/lightbulb.png" />
</div><!-- fin front face -->
<div class="back face center">
<p>L'origine de cette petite recherche est là :</p>
<p><a href="http://css3.bradshawenterprises.com/flip/" target="_blank"><img alt="lightbulb.png" src="images/tutoriels/imagettes/lightbulb.png" style="border-width: 0px; border-style: solid; width: 96px; height: 96px;" /></a></p>
</div><!-- fin back face center -->
</div><!-- fin f1_card -->
</div><!-- fin f1_container -->
</div>

<div style="margin-right:10px; display: inline-block;">
<div id="f1_container">
<div id="f1_card">
<div class="front face"><img src="images/tutoriels/imagettes/support.png" />
</div><!-- fin front face -->
<div class="back face center">
<p>Aiguillé par jac83 et son site. Grand merci à lui !</p>
<p><a href="http://thorame-haute.fr/" target="_blank"><img alt="support.png" src="images/tutoriels/imagettes/support.png" style="border-width: 0px; border-style: solid; width: 96px; height: 96px;" /></a></p>
</div><!-- fin back face center -->
</div><!-- fin f1_card -->
</div><!-- fin f1_container -->
</div>

NB : Des liens ont été placé sur des images pour montrer le fonctionnement. Mais il est facile dans l'éditeur de texte de placer des images, des textes, des liens comme à votre habitude.

NB : Les parties du type [div style="margin-right:10px; display: inline-block;"]...[/div] servent à placer les images dans le flux, à placer des marges ou à passer à la ligne... Seules toutes les parties [div id="..."]...[/div] à l'intérieur sont obligatoires.

NB : Dans le style et dans le code les id sont #f1_container et #f1_card . Il est aisé de créer d'autres règles de style avec d'autres id : #f2_container et #f2_card ... au cas où, dans une même page, une même boîte, vous auriez des images de tailles différentes et/ou avec des réglages différents... Il faudrait alors reporter les id corrects dans le code... bien sûr... Voir le tutoriel suivant qui exploite cette possibilité.

L'origine de cette petite recherche est sur le site de Richard Bradshaw.

Pour plus d'information sur cette mise en place, me contacter ou poster sur le forum.