Efecto Flip Page con CSS

 <div dir="ltr" style="text-align: left;" trbidi="on"><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 {width: 1285px;height: 1388px;overflow: hidden;} #p1 > div {-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;width: 285px;height: 388px;background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEh1dXFgJ1jbGktad-UyzQE3tJXCh0RQ3kKH81Kyv8m1drT3RrD2eoov70mjKl_nds5OM701x9n4WZ5ewMnG3ibcS2i9b2GDKC8SakCgtcQjW_3DfA4p7OJnA_SqaZtKK3D03hJ4Ian7J8b9gePEIAQ2FFe3F9h-AYi8mOuoHPfUx5nSp6CH2ytM2jxI=w267-h400);} #p1 > div > div {width: 10px;height: 388px;} #p2 > div {width: 285px;height: 388px;box-shadow: 0 0 11px rgba(0, 0, 0, .5);position: absolute;z-index: 1;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp5rAgWx1a3bYq2oRcind6mR5ahtkCIkv8qcej_LrOiU5hX0mNodXg3IU6hYt90pDMPygB5AKQZAiv6msB2K5a2DxienQgXy5zuP9wkySvSVnJNWxnRFB5EIS3QYYlk9Q7kTo4BKCcHEhP/s1600/DSC_4920_12_600.jpg);}#r3 {-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;position: absolute;z-index: 2;}#s3 {-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;position: absolute;z-index: 1;} #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 {width: 25px;height: 1000px;-webkit-transition-property: width;-webkit-transition-duration: 1s;overflow: hidden;-moz-transition-property: width;-moz-transition-duration: 1s;} #page-flip:hover #sp3 {width: 11px;} .s {width: 285px;height: 388px;position: absolute;overflow: hidden;z-index: 3;} #s2 {-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;position: absolute;} #sp2 {width: 15px;height: 1000px;overflow: hidden;} #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 {width: 1285px;height: 1388px;overflow: hidden;} #p3 > div {-webkit-transform-origin: 0 0;-webkit-transform: translate(1255px, 500px) rotate(-32deg);-webkit-transition-property: -webkit-transform, -webkit-transform-origin;-webkit-transition-duration: 1s;box-shadow: 0 0 11px rgba(0, 0, 0, .5);-moz-transform-origin: 0 0;-moz-transform: translate(1255px, 500px) rotate(-32deg);-moz-transition-property: -moz-transform, -moz-transform-origin;-moz-transition-duration: 1s;width: 285px;height: 388px;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGrV8Z-1yeOl4W8KrzGpcjCWmDMNv1W8GJ-JVn8Jwv-leplZGwfkdOgqijYvCMcmdFtFkpNCRt2s86CQuODWFhbUuJ26Y1Lz5rnuTv16U00Q4npbuI1R6DEHTLHbTiCZgzlnZzYJR8DmkiSFsR3ahqbp7r3c8owDslQ4Jab7xeaGn0OKVitbHIOhX/w426-h640/DSC_2344_12.jpg);overflow: hidden;} #p3 > div > div {width: 9px;height: 500px;float: right;} #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 {-moz-transition-duration: 0.01s;-moz-transition-property: margin;color: #FFF;display: block;font-family: Verdana;font-size: 32px;font-weight: normal;height: 320px;margin: -20000px 0 0;position: absolute;text-align: center;text-shadow: 0 3px 1px #000;width: 250px;z-index: 3;} #enlace:hover {border: 1px dotted #CCC;} #page-flip:hover #enlace {-webkit-transition-delay: .8s;-moz-transition-delay: .8s;margin: 30px 0 0 15px;}
</style><br /><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 href="" id="enlace" target="_blank" title=""></a></div><br />