GCyrillus Power html book CSS 3- copy but do not sale nor forget my name - it will turn obsolete once , you know.

dabblet.css

/* GCyrillus Power html book CSS 3- copy but do not sale nor forget my name - it will turn obsolete once , you know.
works fine only with ff13 at the moment */
  html,body {
    height:100%;
    width:100%;
	margin:0;
	padding:0;
  }
  body {
    display:-moz-box;
    box-orient:vertical;
    box-pack:center;
    box-align:center;
    }
h1,h2,h3,h4,h5,h6 {text-align:center;font-variant:small-caps;position:relative;z-index:1;}
    p {text-indent:1em;padding:0.5em 1em;position:relative;z-index:1;}
    p:first-letter {text-shadow:0 0 1px white, 0 0 3px black;font-size:2em;vertical-align:-0.05em;;
    }

	
#book {
	display:block;
	position:relative;
	height:614px;
	width:874px;
	outline:0;
}
#book > section, #book > section > article  {
	height:100%;width:100%; 
	position:absolute;
	top:0;right:0;
    perspective:2800px;
    transform-style: preserve-3d;
	backface-visibility:hidden;
}
#book > section > article:nth-child(even) {
	box-shadow:inset0 0 0 1px #999;
 }
#book > section >article{
	width:427px;outline:0;
 }
#book header {
	margin-left:50%;
	width:50%;
	height:100%;
    display:-moz-box;
    box-orient:vertical;
    box-pack:center;
    box-align:center;
	position:relative;
	z-index:2;
	background:#eee;
	box-shadow:inset 0 0 0 15px #eee,inset 0 0 0 18px #123;
}
article:before , #book header:before {
    content:'';
	border:none;
	background-image:-moz-linear-gradient(0,#fff 0%, #ccc 49.5%,black 50%, #ccc 50.5% , #fff 100%);
	border-radius:1em;
	width:10px;
	position:absolute;
	top:0;
	bottom:0;
	right:429px;
	margin-left:-5px;
}
article > div {
	width: 427px;
	float:right;
	margin:0 5px;
	background:#eee;
	min-height:100%;
	z-index:1;
}
article > div:before , #book header:after {
	content:'';
	position:absolute;
	top:1em;left:1em;bottom:1em;right:1em;
	background:#eee;
	z-index:0;
}
#book:focus header {


	transform-origin:left;
	transform:rotateY(-180deg) ;
	transition: transform 0.25s;
	
}
article > div:first-child {
	margin-right:0;
	float:left;
	margin-left:-437px;
	transform-origin:right;
	transform:rotateY(180deg) ;
	transition: transform 5s;
	z-index:1;
}
article:last-of-type > div:first-child {
	transition: 0.25s;
}
 #book > section > article:focus + article > div:first-child,
 #book:focus   section   article:first-of-type  div:first-child {
	transform:rotateY(0deg);
	transition: transform 1s;
	transform-origin:right;-moz-perspective: 40px;
    transform-style: preserve-3d;
	z-index:30;
}
 #book > section > article:focus + article,
 #book:focus   section   article:first-of-type  {
	z-index:35;
	
}
article:focus {overflow:hidden;padding-left:437px;}
article:last-of-type {overflow:visible;padding:0;}
img {box-shadow:0 0 2px black, 0 0 4px white;border-radius:3px;}

dabblet.html

<div id="book" tabindex=0">
	<section>
		<header>
			<h1>HTML BOOK</h1>
			<h2>CSS POWER</h2>
		</header>
		
		<article id="p1-2" tabindex="0">
			<div id="p1"><h2>titre page 1</h2>
				<p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis 
				illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato 
				Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>
				<p><img src="http://lorempixum.com/380/60/sports" alt=""/></p>
				<p>Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae 
				ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente 
				aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam 
				parietes arcanorum soli conscii timebantur.</p>
			</div>
			
			<div id="p2">
				<h3>titre page 2</h3><p>Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta 
				qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen 
				alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut 
				longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>
				<p>Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione 
				magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. 
				Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant 
				ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. </p>
				<p><img src="http://lorempixum.com/380/60/food" alt=""/></p>
			</div>
		</article>

		<article id="p3-4" tabindex="0">
			<div id="p3">
			<p><img src="http://lorempixum.com/380/60/nature" alt=""/></p>
			<h2>titre page 3</h2>
				<p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis 
				illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato 
				Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>
				<p>Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae 
				ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente 
				aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam 
				parietes arcanorum soli conscii timebantur.</p>
				<p><img src="http://lorempixum.com/380/60/abstract" alt=""/></p>
			</div>
			
			<div id="p4">
				<h3>titre page 4</h3><p>Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta 
				qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen 
				alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut 
				longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>
				<p><img src="http://lorempixum.com/380/60/animals" alt=""/></p>
				<p>Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione 
				magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. 
				Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant 
				ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. </p>
			</div>
		</article>

		<article id="p5-6" tabindex="0">
			<div id="p5"><h2>titre page 5</h2>
				<p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis 
				illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato 
				Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>
				<p><img src="http://lorempixum.com/380/60/nightlife" alt="" /></p>
				<p>Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae 
				ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente 
				aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam 
				parietes arcanorum soli conscii timebantur.</p>
				<p><img src="http://lorempixum.com/380/60/city" alt="" /></p>
			</div>
			
			<div id="p6">
				<h3>titre page 6</h3><p>Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta 
				qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen 
				alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut 
				longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>
				<p>Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione 
				magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. 
				Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant 
				ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. </p>
				<p><img src="http://lorempixum.com/380/60/fashion" alt=""/></p>
			</div>
		</article>


		<article id="p7-8" tabindex="0">
			<div id="p7">
			<p><img src="http://lorempixum.com/380/60/transport" alt=""/></p>
			<h2>titre page 7</h2>
				<p>Has autem provincias, quas Orontes ambiens amnis imosque pedes Cassii montis 
				illius celsi praetermeans funditur in Parthenium mare, Gnaeus Pompeius superato 
				Tigrane regnis Armeniorum abstractas dicioni Romanae coniunxit.</p>
				<p>Et interdum acciderat, ut siquid in penetrali secreto nullo citerioris vitae 
				ministro praesente paterfamilias uxori susurrasset in aurem, velut Amphiarao referente 
				aut Marcio, quondam vatibus inclitis, postridie disceret imperator. ideoque etiam 
				parietes arcanorum soli conscii timebantur.</p>
				<p><img src="http://lorempixum.com/380/60/people" alt=""/></p>
			</div>
			
			<div id="p8">
				<h3>titre page 8</h3><p>Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta 
				qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen 
				alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut 
				longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>
				<p><img src="http://lorempixum.com/380/60/technics" alt=""/></p>
				<p>Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione 
				magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. 
				Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant 
				ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. </p>
			</div>
		</article>
		
	</section>
</div>
<p>HTML/CSS provided by GCyrillus, image for test purposes only from http://lorempixum.com - it stands <a  title="dabblet.com" href="http://dabblet.com/gist/2920736">here</a> </p>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}