28172 sujets

CSS et mise en forme, CSS3

Créer une animation d'ouverture de livre

Bonjour,

avant toute chose, je vous poste mon code actuel :

HTML :

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>poney</title>
		<link rel="stylesheet" href="./poney.css" />
 
	</head>
 
	<body>
	<div id="f1_container">
		<div id="f2_card" class="shadow">
		  <div class="face2">
			<img src="./face.jpg"/>
		  </div>
		  <div class="back2 face2 center2">
			<img src="./dos.jpg"/>
		  </div>
		</div>
 
		<div id="f1_card" class="shadow">
		  <div class="face">
			<img src="./p1.jpg"/>
		  </div>
		  <div class="back face center">
			<img src="./p2.jpg"/>
		  </div>
		</div>
	</div>
</body>
</html>


CSS :


#f1_container {
  position: relative;
  margin: 10px auto;
  width: 800px;
  height: 400px;
  perspective: 1000;
  -webkit-perspective: 700;
  background: red;
}
 
#f1_card {
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
  transition: all 1.0s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1s ease-in-out;
 -webkit-transform-origin: right;
 
}
 
#f1_container:hover #f1_card {
 
	-webkit-transform: rotateY(-180deg);
}
 
#f2_card {
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
  transition: all 1.0s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1s ease-in-out;
  -webkit-transform-origin: right;
}
#f1_container:hover #f2_card {
	-webkit-transition-delay: 2s;
	-webkit-transform: rotateY(-180deg);
}
 
.face {
	position: absolute;
	left: 100%;
	bottom: 100%;
	width: 400px;
	height: 400px;
	-webkit-backface-visibility: hidden;
	z-index: 3;
}
 
.face.back {
 -webkit-transform: rotateY(-180deg);
}
 
.face2 {
  position: absolute;
  left: 100%;
  width: 400px;
  height: 400px;
  -webkit-backface-visibility: hidden;
   z-index: 0;
}
 
.face2.back2 {
  -webkit-transform: rotateY(-180deg);
}


&#65279;Si vous essayez ces bouts de code, vous allez rapidement en comprendre le but et voir aussi rapidement les limites de ce que j'ai fait.



Pour tout de même m'expliquer succinctement, il faut imaginer un faire-part avec couv, 4ème de couv et intérieurs.

On désire simplement en faire une présentation en l'ouvrant page après page puis en le refermant.

Est-il possible de faire ceci en pur CSS d'une part et d'autre part, si oui, avec quoi doit-on jouer ? (transition-delay ?)

Sinon, s'il faut nécessairement faire usage de JS, je suis également preneur si vous avez des pistes !



Merci par avance, à plus.
Salut,
Pas évidant de voir ce que tu souhaite faire (nous n'avons pas les images du code html). Une capture d'écran à la place serait souhaitable.

Tu cherche à faire un slider (diaporama), ou un flipBook ?
Hello, c'est un flipbook, ci-joint, 4 jpg simplement coloré pour tests.
Mon souci précis est qu'à la fermeture du "livre", la dernière "page" passe sous toutes les autres ! Smiley ohwell
Merci d'avance pour votre aide ! Smiley smile
Sujet clos
Aller à