Efecto Flip Page con CSS

Pure CSS3 Page Flip Effect es un experimento más de Román Cortés que, por la fecha de su realización, sólo funcionaba en Chorme pero, que con algunos pequeños agregados, también funcionará en otros navegadores.

Las reglas de estilo son bastante complejas aunque no usan propiedades sofisticadas así que no se pueden explicar demasiado; sólo hay que poner manos a la obra, hacer algunos calculos aritméticos e ir probando poco a poco porque el resultado es espectacular y permitiría hacer muchas otras cosas.

En este ejemplo, me he limitado a agregar las propiedades para Firefox y he simplificado un poco la idea.

Pure CSS3 Page Flip Effect

<style type="text/css">

#page-flip {

  height: 450px;

  overflow: hidden;

  padding: 30px 0 0 320px;

  position: relative;

  width: 300px;

}

#r1 {

  position: absolute;

  z-index: 2;

  -webkit-transform-origin: 1315px 500px;

  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);

  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;

  -webkit-transition-duration: 1s;

  -moz-transform-origin: 1315px 500px;

  -moz-transform: translate(-1030px, -500px) rotate(-32deg);

  -moz-transition-property: -moz-transform, -moz-transform-origin;

  -moz-transition-duration: 1s;

}

#p1 {

  height: 1388px;

  overflow: hidden;

  width: 1285px;

}

#p1 > div {

  background-image: url(URL_primera_imagen);

  height: 388px;

  width: 285px;

  -webkit-transform-origin: 285px 0;

  -webkit-transform: translate(1030px, 500px) rotate(32deg);

  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;

  -webkit-transition-duration: 1s;

  -moz-transform-origin: 285px 0;

  -moz-transform: translate(1030px, 500px) rotate(32deg);

  -moz-transition-property: -moz-transform, -moz-transform-origin;

  -moz-transition-duration: 1s;

}

#p1 > div > div {

  height: 388px;

  width: 10px;

}

 #p2 > div {

  background-image: url(URL_segunda_imagen);

  box-shadow: 0 0 11px rgba(0, 0, 0, .5);

  height: 388px;

  position: absolute;

  width: 285px;

  z-index: 1;

}

#r3 {

  position: absolute;

  z-index: 2;

  -webkit-transform-origin: 1315px 500px;

  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);

  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;

  -webkit-transition-duration: 1s;

  -moz-transform-origin: 1315px 500px;

  -moz-transform: translate(-1030px, -500px) rotate(-32deg);

  -moz-transition-property: -moz-transform, -moz-transform-origin;

  -moz-transition-duration: 1s;

}

#s3 {

  position: absolute;

  z-index: 1;

  -webkit-transform-origin: 70px 500px;

  -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);

  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;

  -webkit-transition-duration: 1s;

  -moz-transform-origin: 70px 500px;

  -moz-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);

  -moz-transition-property: -moz-transform, -moz-transform-origin;

  -moz-transition-duration: 1s;

}

#page-flip:hover #s3 {

  -webkit-transform-origin: 325px 500px;

  -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);

  -moz-transform-origin: 325px 500px;

  -moz-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);

}

#sp3 {

  height: 1000px;

  overflow: hidden;

  width: 25px;

  -webkit-transition-property: width;

  -webkit-transition-duration: 1s;

  -moz-transition-property: width;

  -moz-transition-duration: 1s;

}

#page-flip:hover #sp3 {

  width: 11px;

}

.s {

  height: 388px;

  position: absolute;

  overflow: hidden;

  width: 285px;

  z-index: 3;

}

#s2 {

  position: absolute;

  -webkit-transform-origin: 45px 500px;

  -webkit-transform: translate(240px, -500px) rotate(-32deg);

  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;

  -webkit-transition-duration: 1s;

  -moz-transform-origin: 45px 500px;

  -moz-transform: translate(240px, -500px) rotate(-32deg);

  -moz-transition-property: -moz-transform, -moz-transform-origin;

  -moz-transition-duration: 1s;

}

#sp2 {

  height: 1000px;

  overflow: hidden;

  width: 15px;

}

#s4 {

  opacity: 1;

  -webkit-transition-duration: 0.5s;

  -moz-transition-duration: 0.5s;

}

#page-flip:hover #s4 {

  opacity: 0;

}

#page-flip:hover #s2 {

  -webkit-transform-origin: 300px 500px;

  -webkit-transform: translate(-15px, -500px) rotate(0deg);

  -moz-transform-origin: 300px 500px;

  -moz-transform: translate(-15px, -500px) rotate(0deg);

}

#p3 {

  height: 1388px;

  overflow: hidden;

  width: 1285px;

}

#p3 > div {

  background-image: url(URL_segunda_imagen);

  box-shadow: 0 0 11px rgba(0, 0, 0, .5);

  overflow: hidden;

  height: 388px;

  width: 285px;

  -webkit-transform-origin: 0 0;

  -webkit-transform: translate(1255px, 500px) rotate(-32deg);

  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;

  -webkit-transition-duration: 1s;

  -moz-transform-origin: 0 0;

  -moz-transform: translate(1255px, 500px) rotate(-32deg);

  -moz-transition-property: -moz-transform, -moz-transform-origin;

  -moz-transition-duration: 1s;

}

#p3 > div > div {

  float: right;

  height: 500px;

  width: 9px;

}

#page-flip:hover #r1 {

  -webkit-transform-origin: 1570px 500px;

  -webkit-transform: translate(-1285px, -500px) rotate(0deg);

  -moz-transform-origin: 1570px 500px;

  -moz-transform: translate(-1285px, -500px) rotate(0deg);

}

#page-flip:hover #p1 > div {

  -webkit-transform-origin: 285px 0;

  -webkit-transform: translate(1285px, 500px) rotate(0deg);

  -moz-transform-origin: 285px 0;

  -moz-transform: translate(1285px, 500px) rotate(0deg);

}

#page-flip:hover #r3 {

  -webkit-transform-origin: 1570px 500px;

  -webkit-transform: translate(-1285px, -500px) rotate(0deg);

  -moz-transform-origin: 1570px 500px;

  -moz-transform: translate(-1285px, -500px) rotate(0deg);

}

#page-flip:hover #p3 > div {

  -webkit-transform-origin: 0 0;

  -webkit-transform: translate(1000px, 500px) rotate(0deg);

  -moz-transform-origin: 0 0;

  -moz-transform: translate(1000px, 500px) rotate(0deg);

}

#enlace {

  color: #FFF;

  display: block;

  font-family: Verdana;

  font-size: 32px;

  height: 320px;

  margin: -20000px 0 0;

  position: absolute;

  text-align: center;

  text-shadow: 0 3px 1px #000;

  width: 250px;

  z-index: 3;

  -webkit-transition-duration: 0.01s;

  -webkit-transition-property: margin;

  -moz-transition-duration: 0.01s;

  -moz-transition-property: margin;

}

#enlace:hover {

  border: 1px dotted #CCC;

}

#page-flip:hover #enlace {

  margin: 30px 0 0 15px;

  -webkit-transition-delay: .8s;

  -moz-transition-delay: .8s;

}

</style>



<div id="page-flip">

  <div id="r1">

    <div id="p1"><div><div></div></div></div>

  </div>

  <div id="p2"><div></div></div>

  <div id="r3">

    <div id="p3"><div><div></div></div></div>

  </div>

  <div class="s">

    <div id="s3"><div id="sp3"></div></div>

  </div>

  <div class="s" id="s4">

    <div id="s2"><div id="sp2"></div></div>

  </div>

  <a id="enlace" href="URL_enlace" title="" target="_blank">texto del enlace</a>

</div>