JMiur [E]

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>

votar

8 comentarios:

Nico  

Esta muy muy bueno. :D

En realidad, no es tanto código, teniendo en cuenta el efecto y que no usa Flash. Es interesante.

Responder
JMiur  

No, no es "tanto" código. Es complejo, eso si. A mi me pareció muy original porque la animación está muy bien lograda.

Chris.YEXHUA  

cordiales saludos JMiur.
le estoy siguiendo desde hace tiempo esta maravillosa pagina.
me podrías decir donde se acoplan estos códigos.
y los Css papeles deslizantes,
por acople en un gaddet Configurar HTML/JavaScript.
pero no me funcionan, van hay o se acoplan en el Css?
gracias por estos elementos que nos brinda campeón...Chris:

JMiur  

No hay mucho que pueda decirte, en este ejemplo, todo está colocado en la misma entrada con bastante esfuerzo porque se trata de un experimento. Habría que ver el tuyo para tratar de entender dónde está el error.

Responder
Unknown  

Precioso, genial, esa cabeza Jmiur (lo de los cálculos matemáticos no es lo mío) :D

Responder
JMiur  

Confieso que yo tampoco he hecho cálculos y me he limitado a usar los que tenía en ejemplo :D

Responder
Adrián J. Messina  

Sí esta muy bien logrado, ¡Que trabajo!
Imaginá que si para vos es complejo lo que sería al menos para mí, jaja.
Gracias por compartirlo.
Un abrazo.

Responder
JMiur  

Es complejo para todos :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

Suscribirse a los comentarios
 
CERRAR