Html Codes}html,body{height:100%;overflow:hidden;}body{background:-webkit-radial-gradient(#E4CEA6, #9C8763);background:radial-gradient(#E4CEA6, #9C8763);-webkit-perspective:900px;perspective:900px;margin:0;}#flip{-webkit-animation:wrapper 6s ease-in-out infinite;animation:wrapper 6s ease-in-out infinite;height:350px;width:253px;position:absolute;left:50%;top:30%;-webkit-transform:translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important;transform:translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform-origin:0 0 0;transform-origin:0 0 0;}@-webkit-keyframes wrapper{50%{-webkit-transform:translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);transform:translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);}}@keyframes wrapper{50%{-webkit-transform:translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);transform:translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);}}#flip div{height:350px;width:24px;position:absolute;left:calc(100% - 1px);-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;background-size:253px 350px;}#flip #front, #flip #front div{background-image:url(http://blogs.slj.com/afuse8production/files/2012/06/Hobbit1.jpg);box-shadow:inset rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px;}#flip #front > div > div > div > div > div > div > div > div > div > div{box-shadow:inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;}#flip #back{-webkit-transform:rotateY(.4deg);transform:rotateY(.4deg);-webkit-transform-origin:-100% 0;transform-origin:-100% 0;} #flip #back,#flip #back div{background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map1_.jpg);}#flip > div{left:0;background-position-x:0;}#flip div > div{background-position-x:-23px;-webkit-animation:page 6s ease-in-out infinite;animation:page 6s ease-in-out infinite;}#flip div > div > div{background-position-x :-46px;} #flip div > div > div > div{background-position-x :-69px;}#flip div > div > div > div > div{background-position-x :-92px;}#flip div > div > div > div > div > div{background-position-x :-115px;}#flip div > div > div > div > div > div > div{background-position-x :-138px;}#flip div > div > div > div > div > div > div > div{background-position-x :-161px;}#flip div > div > div > div > div > div > div > div > div{background-position-x :-184px;}#flip div > div > div > div > div > div > div > div > div > div{background-position-x :-207px;}#flip div > div > div > div > div > div > div > div > div > div > div{background-position-x :-229px;}@-webkit-keyframes page{15%{-webkit-transform:rotateY(-10deg);transform:rotateY(-10deg);}50%{-webkit-transform:rotateY(-2deg);transform:rotateY(-2deg);}65%{-webkit-transform:rotateY(10deg);transform:rotateY(10deg);}100%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);}}@keyframes page{15%{-webkit-transform:rotateY(-10deg);transform:rotateY(-10deg);}50%{-webkit-transform:rotateY(-2deg);transform:rotateY(-2deg);}65%{-webkit-transform:rotateY(10deg);transform:rotateY(10deg);}100%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);}}#book{width:248px;height:350px;position:absolute;left:50%;top:30%;-webkit-transform:translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);transform:tr}