-webkit- -moz- -ms- -o- >..................< normalize.css article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} End-normalize.css >..................< >..................< demo.css @import url(//fonts.googleapis.com/css?family=Lato:300,400,700); @font-face { font-family: 'codropsicons'; src:url('../fonts/codropsicons/codropsicons.eot'); src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); font-weight: normal; font-style: normal; } .container > header, .codrops-top { font-family: 'Lato', Arial, sans-serif; color: #34495e; } .container > header { margin: 0 auto; padding: 2em; text-align: center; background: #34495e; color: #fff; } .container > header h1 { font-size: 2.625em; line-height: 1.3; margin: 0; font-weight: 300; } .container > header span { display: block; font-size: 60%; color: #16a085; padding: 0 0 0.6em 0.1em; } /* To Navigation Style */ .codrops-top { background: #253749; text-transform: uppercase; width: 100%; font-size: 0.69em; line-height: 2.2; } .codrops-top a { text-decoration: none; padding: 0 1em; letter-spacing: 0.1em; color: #fff; display: inline-block; } .codrops-top a:hover { background: rgba(255,255,255,0.1); color: #fff; } .codrops-top span.right { float: right; } .codrops-top span.right a { float: left; display: block; } .codrops-icon:before { font-family: 'codropsicons'; margin: 0 4px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .codrops-icon-drop:before { content: "\e001"; } .codrops-icon-prev:before { content: "\e004"; } /* Demo Buttons Style */ .codrops-demos { padding-top: 1em; font-size: 0.9em; } .codrops-demos a { text-decoration: none; outline: none; display: inline-block; margin: 0.5em; font-size: 1.1em; padding: 0.7em 1.1em; border: 3px solid #16a085; color: #16a085; font-weight: 700; } .codrops-demos a:hover, .codrops-demos a.current-demo, .codrops-demos a.current-demo:hover { border-color: #fff; color: #fff; } p.note { font-size: 1.1em; text-align: center; padding: 40px 10px 100px; max-width: 700px; margin: 0 auto; line-height: 1.4; } @media screen and (max-width: 25em) { .codrops-icon span { display: none; } } End-demo.css >..................< >..................< book.css /* A. Mini Reset */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } * { margin: 0; padding: 0; } ::before, ::after { content: ""; } html, body { height: 100%; -webkit-font-smoothing: subpixel-antialiased; } html { font-size: 100%; } body { background: #ecf0f1; color: #34495e; font-family: 'Lato', 'Arial', sans-serif; font-weight: 400; line-height: 1.2; } ul { margin: 0; padding: 0; list-style: none; } a { color: #2c3e50; text-decoration: none; } .btn { display: inline-block; text-transform: uppercase; border: 2px solid #2c3e50; margin-top: 100px; font-size: 0.7em; font-weight: 700; padding: 0.1em 0.4em; text-align: center; -webkit-transition: color 0.3s, border-color 0.3s; -moz-transition: color 0.3s, border-color 0.3s; transition: color 0.3s, border-color 0.3s; } .btn:hover { border-color: #16a085; color: #16a085; } /* basic grid, only for this demo */ .align { clear: both; margin: 90px auto 20px; width: 100%; max-width: 1170px; text-align: center; } .align > li { width: 500px; min-height: 300px; display: inline-block; margin: 30px 20px 30px 30px; padding: 0 0 0 60px; vertical-align: top; } /* /////////////////////////////////////////////////// HARDCOVER Table of Contents 1. container 2. background & color 3. opening cover, back cover and pages 4. position, transform y transition 5. events 6. Bonus - Cover design - Ribbon - Figcaption 7. mini-reset /////////////////////////////////////////////////////*/ /* 1. container */ .book { position: relative; width: 160px; height: 220px; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } /* 2. background & color */ /* HARDCOVER FRONT */ .hardcover_front li:first-child { background-color: #eee; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } /* reverse */ .hardcover_front li:last-child { background: #fffbec; } /* HARDCOVER BACK */ .hardcover_back li:first-child { background: #fffbec; } /* reverse */ .hardcover_back li:last-child { background: #fffbec; } .book_spine li:first-child { background: #eee; } .book_spine li:last-child { background: #333; } /* thickness of cover */ .hardcover_front li:first-child:after, .hardcover_front li:first-child:before, .hardcover_front li:last-child:after, .hardcover_front li:last-child:before, .hardcover_back li:first-child:after, .hardcover_back li:first-child:before, .hardcover_back li:last-child:after, .hardcover_back li:last-child:before, .book_spine li:first-child:after, .book_spine li:first-child:before, .book_spine li:last-child:after, .book_spine li:last-child:before { background: #999; } /* page */ .page > li { background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%); box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2); border-radius: 0px 5px 5px 0px; } /* 3. opening cover, back cover and pages */ .hardcover_front { -webkit-transform: rotateY(-34deg) translateZ(8px); -moz-transform: rotateY(-34deg) translateZ(8px); transform: rotateY(-34deg) translateZ(8px); z-index: 100; } .hardcover_back { -webkit-transform: rotateY(-15deg) translateZ(-8px); -moz-transform: rotateY(-15deg) translateZ(-8px); transform: rotateY(-15deg) translateZ(-8px); } .page li:nth-child(1) { -webkit-transform: rotateY(-28deg); -moz-transform: rotateY(-28deg); transform: rotateY(-28deg); } .page li:nth-child(2) { -webkit-transform: rotateY(-30deg); -moz-transform: rotateY(-30deg); transform: rotateY(-30deg); } .page li:nth-child(3) { -webkit-transform: rotateY(-32deg); -moz-transform: rotateY(-32deg); transform: rotateY(-32deg); } .page li:nth-child(4) { -webkit-transform: rotateY(-34deg); -moz-transform: rotateY(-34deg); transform: rotateY(-34deg); } .page li:nth-child(5) { -webkit-transform: rotateY(-36deg); -moz-transform: rotateY(-36deg); transform: rotateY(-36deg); } /* 4. position, transform & transition */ .hardcover_front, .hardcover_back, .book_spine, .hardcover_front li, .hardcover_back li, .book_spine li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .hardcover_front, .hardcover_back { -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; transform-origin: 0% 100%; } .hardcover_front { -webkit-transition: all 0.8s ease, z-index 0.6s; -moz-transition: all 0.8s ease, z-index 0.6s; transition: all 0.8s ease, z-index 0.6s; } /* HARDCOVER front */ .hardcover_front li:first-child { cursor: default; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-transform: translateZ(2px); -moz-transform: translateZ(2px); transform: translateZ(2px); } .hardcover_front li:last-child { -webkit-transform: rotateY(180deg) translateZ(2px); -moz-transform: rotateY(180deg) translateZ(2px); transform: rotateY(180deg) translateZ(2px); } /* HARDCOVER back */ .hardcover_back li:first-child { -webkit-transform: translateZ(2px); -moz-transform: translateZ(2px); transform: translateZ(2px); } .hardcover_back li:last-child { -webkit-transform: translateZ(-2px); -moz-transform: translateZ(-2px); transform: translateZ(-2px); } /* thickness of cover */ .hardcover_front li:first-child:after, .hardcover_front li:first-child:before, .hardcover_front li:last-child:after, .hardcover_front li:last-child:before, .hardcover_back li:first-child:after, .hardcover_back li:first-child:before, .hardcover_back li:last-child:after, .hardcover_back li:last-child:before, .book_spine li:first-child:after, .book_spine li:first-child:before, .book_spine li:last-child:after, .book_spine li:last-child:before { position: absolute; top: 0; left: 0; } /* HARDCOVER front */ .hardcover_front li:first-child:after, .hardcover_front li:first-child:before { width: 4px; height: 100%; } .hardcover_front li:first-child:after { -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px); -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px); transform: rotateY(90deg) translateZ(-2px) translateX(2px); } .hardcover_front li:first-child:before { -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px); -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px); transform: rotateY(90deg) translateZ(158px) translateX(2px); } .hardcover_front li:last-child:after, .hardcover_front li:last-child:before { width: 4px; height: 160px; } .hardcover_front li:last-child:after { -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px); -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px); transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px); } .hardcover_front li:last-child:before { box-shadow: 0px 0px 30px 5px #333; -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px); -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px); transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px); } /* thickness of cover */ .hardcover_back li:first-child:after, .hardcover_back li:first-child:before { width: 4px; height: 100%; } .hardcover_back li:first-child:after { -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px); -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px); transform: rotateY(90deg) translateZ(-2px) translateX(2px); } .hardcover_back li:first-child:before { -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px); -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px); transform: rotateY(90deg) translateZ(158px) translateX(2px); } .hardcover_back li:last-child:after, .hardcover_back li:last-child:before { width: 4px; height: 160px; } .hardcover_back li:last-child:after { -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px); -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px); transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px); } .hardcover_back li:last-child:before { box-shadow: 10px -1px 80px 20px #666; -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px); -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px); transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px); } /* BOOK SPINE */ .book_spine { -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px); -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px); transform: rotateY(60deg) translateX(-5px) translateZ(-12px); width: 16px; z-index: 0; } .book_spine li:first-child { -webkit-transform: translateZ(2px); -moz-transform: translateZ(2px); transform: translateZ(2px); } .book_spine li:last-child { -webkit-transform: translateZ(-2px); -moz-transform: translateZ(-2px); transform: translateZ(-2px); } /* thickness of book spine */ .book_spine li:first-child:after, .book_spine li:first-child:before { width: 4px; height: 100%; } .book_spine li:first-child:after { -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px); -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px); transform: rotateY(90deg) translateZ(-2px) translateX(2px); } .book_spine li:first-child:before { -webkit-transform: rotateY(-90deg) translateZ(-12px); -moz-transform: rotateY(-90deg) translateZ(-12px); transform: rotateY(-90deg) translateZ(-12px); } .book_spine li:last-child:after, .book_spine li:last-child:before { width: 4px; height: 16px; } .book_spine li:last-child:after { -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px); -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px); transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px); } .book_spine li:last-child:before { box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2); -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px); -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px); transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px); } .page, .page > li { position: absolute; top: 0; left: 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .page { width: 100%; height: 98%; top: 1%; left: 3%; z-index: 10; } .page > li { width: 100%; height: 100%; -webkit-transform-origin: left center; -moz-transform-origin: left center; transform-origin: left center; -webkit-transition-property: transform; -moz-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; transition-timing-function: ease; } .page > li:nth-child(1) { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; } .page > li:nth-child(2) { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; } .page > li:nth-child(3) { -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; } .page > li:nth-child(4) { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; } .page > li:nth-child(5) { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; } /* 5. events */ .book:hover > .hardcover_front { -webkit-transform: rotateY(-145deg) translateZ(0); -moz-transform: rotateY(-145deg) translateZ(0); transform: rotateY(-145deg) translateZ(0); z-index: 0; } .book:hover > .page li:nth-child(1) { -webkit-transform: rotateY(-30deg); -moz-transform: rotateY(-30deg); transform: rotateY(-30deg); -webkit-transition-duration: 1.5s; -moz-transition-duration: 1.5s; transition-duration: 1.5s; } .book:hover > .page li:nth-child(2) { -webkit-transform: rotateY(-35deg); -moz-transform: rotateY(-35deg); transform: rotateY(-35deg); -webkit-transition-duration: 1.8s; -moz-transition-duration: 1.8s; transition-duration: 1.8s; } .book:hover > .page li:nth-child(3) { -webkit-transform: rotateY(-118deg); -moz-transform: rotateY(-118deg); transform: rotateY(-118deg); -webkit-transition-duration: 1.6s; -moz-transition-duration: 1.6s; transition-duration: 1.6s; } .book:hover > .page li:nth-child(4) { -webkit-transform: rotateY(-130deg); -moz-transform: rotateY(-130deg); transform: rotateY(-130deg); -webkit-transition-duration: 1.4s; -moz-transition-duration: 1.4s; transition-duration: 1.4s; } .book:hover > .page li:nth-child(5) { -webkit-transform: rotateY(-140deg); -moz-transform: rotateY(-140deg); transform: rotateY(-140deg); -webkit-transition-duration: 1.2s; -moz-transition-duration: 1.2s; transition-duration: 1.2s; } /* 6. Bonus */ /* cover CSS */ .coverDesign { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; z-index: 1; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .coverDesign::after { background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%); background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%); background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%); position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .coverDesign h1 { color: #fff; font-size: 2.2em; letter-spacing: 0.05em; text-align: center; margin: 54% 0 0 0; text-shadow: -1px -1px 0 rgba(0,0,0,0.1); } .coverDesign p { color: #f8f8f8; font-size: 1em; text-align: center; text-shadow: -1px -1px 0 rgba(0,0,0,0.1); } .yellow { background-color: #f1c40f; background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%); background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%); background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%); } .blue { background-color: #3498db; background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%); background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%); background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%); } .grey { background-color: #f8e9d1; background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%); background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%); background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%); } /* Basic ribbon */ .ribbon { background: #c0392b; color: #fff; display: block; font-size: 0.7em; position: absolute; top: 11px; right: 1px; width: 40px; height: 20px; line-height: 20px; letter-spacing: 0.15em; text-align: center; -webkit-transform: rotateZ(45deg) translateZ(1px); -moz-transform: rotateZ(45deg) translateZ(1px); transform: rotateZ(45deg) translateZ(1px); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; z-index: 10; } .ribbon::before, .ribbon::after{ position: absolute; top: -20px; width: 0; height: 0; border-bottom: 20px solid #c0392b; border-top: 20px solid transparent; } .ribbon::before{ left: -20px; border-left: 20px solid transparent; } .ribbon::after{ right: -20px; border-right: 20px solid transparent; } /* figcaption */ figcaption { padding-left: 40px; text-align: left; position: absolute; top: 0%; left: 160px; width: 310px; -webkit-backface-visibility: hidden; } figcaption h1 { margin: 0; } figcaption span { color: #16a085; padding: 0.6em 0 1em 0; display: block; } figcaption p { color: #63707d; line-height: 1.3; } /* Media Queries */ @media screen and (max-width: 37.8125em) { .align > li { width: 100%; min-height: 440px; height: auto; padding: 0; margin: 0 0 30px 0; } .book { margin: 0 auto; } figcaption { text-align: center; width: 320px; top: 250px; padding-left: 0; left: -80px; font-size: 90%; } } End-book.css >..................< >..................< Extras #cdawrap { --cda-width: 180px; --cda-height: auto; --cda-left: auto; --cda-right: 15px; --cda-top: 35px; --cda-bottom: auto; --cda-background: rgba(255,255,255,0.8); --cda-border-width: 1px; --cda-border-color: rgba(0,0,0,0.05); --cda-text-color: #4f5152; --cda-text-weight: 700; --cda-text-align: left; --cda-remove-color: #c81e60; --cda-sp-color: #3653bc; width: 180px; width: var(--cda-width); height: auto; height: var(--cda-height); right: 15px; right: var(--cda-right); top: 35px; top: var(--cda-top); left: auto; left: var(--cda-left); bottom: auto; bottom: var(--cda-bottom); position: fixed; background: rgba(255,255,255,0.8); background: var(--cda-background); border: 1px solid rgba(0,0,0,0.05); border-width: var(--cda-border-width); border-color: var(--cda-border-color); z-index: 1000000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; padding: 1rem; font-size: 12px; box-sizing: border-box; letter-spacing: 0px; text-align: var(--cda-text-align); line-height: 1; } .cda-naked #cdawrap { --cda-background: transparent; padding: 0; border: 0; font-family: inherit; } .cda-alignright #cdawrap { text-align: right; } .cda-noimg #cdawrap { padding: 1rem; --cda-width: 260px; } #cdawrap .carbon-img { display: block; border: none; margin: 0.25rem 0 0.25rem; } .cda-noimg #cdawrap .carbon-img { display: none; } #cdawrap .carbon-img img { width: 150px; height: auto; max-width: 100%; } #cdawrap .carbon-text { color: #4f5152; color: var(--cda-text-color); padding: 0.25rem 0 0.75rem; display: block; line-height: 1.4; font-weight: 700; font-weight: var(--cda-text-weight); text-decoration: none; text-transform: none; letter-spacing: 0px; border: 0; } .cda-footer { display: flex; align-items: center; justify-content: space-between; } .cda-removeleft .cda-footer { justify-content: flex-start; } .cda-alignright .cda-footer { justify-content: flex-end; } #cdawrap a.carbon-poweredby, #cda-remove { display: inline-block; font-size: 10px; color: #3653bc; color: var(--cda-sp-color); font-weight: 400; text-decoration: none; text-transform: none; letter-spacing: 0px; border: 0; } #cdawrap a.carbon-poweredby:hover, #cdawrap a.carbon-poweredby:focus { color: var(--cda-sp-color); } #cda-remove { position: relative; cursor: pointer; color: #c81e60; color: var(--cda-remove-color); } #cda-remove::before { content: ''; position: absolute; width: 150%; height: 150%; left: -25%; top: -25%; } .cda-removeleft #cda-remove, .cda-alignright #cda-remove { margin-left: 1.5rem; } #cdawrap #cda-remove:hover, #cdawrap #cda-remove:focus { color: var(--cda-remove-color); } .cda-noremove #cda-remove { display: none; } .cda-horizontal #cdawrap { padding: 13px; min-height: 126px; --cda-width: 320px; } .cda-horizontal #cdawrap .carbon-img { float: left; margin-right: 1rem; } @media screen and (max-width: 800px){ body #cdawrap, body.cda-noimg #cdawrap { width: 100%; height: auto; min-height: 0 !important; right: 0px; top: auto !important; bottom: 0px !important; left: 0px !important; position: fixed; background: #121313 !important; padding: 15px 10px 10px 10px; text-align: left; font-size: 11px; } body #cdawrap::before { content: 'Our Sponsor'; position: absolute; top: 0; left: 0; color: #424242; font-size: 9px; padding: 10px; } body #cdawrap #carbonads { padding: 0 !important; } body #cdawrap .carbon-text { color: #838383 !important; padding: 15px 0 10px !important; } body #cdawrap .carbon-img { display: none; } #cdawrap a.carbon-poweredby { display: none; } body #cda-remove { position: absolute; top: 9px; right: 1rem; display: block; } body .cda-noremove #cda-remove { display: block; } } @media screen and (max-width: 460px){ body.cda-hidemobile #cdawrap { display: none; } } >..................< >..................< Modernizr (js/)modernizr.custom.js /* Modernizr 2.6.2 (Custom Build) | MIT & BSD * Build: http://modernizr.com/download/#-touch-shiv-cssclasses-teststyles-prefixes-load */ ;window.Modernizr=function(a,b,c){function w(a){j.cssText=a}function x(a,b){return w(m.join(a+";")+(b||""))}function y(a,b){return typeof a===b}function z(a,b){return!!~(""+a).indexOf(b)}function A(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:y(f,"function")?f.bind(d||b):f}return!1}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n={},o={},p={},q=[],r=q.slice,s,t=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},u={}.hasOwnProperty,v;!y(u,"undefined")&&!y(u.call,"undefined")?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=r.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(r.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(r.call(arguments)))};return e}),n.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:t(["@media (",m.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c};for(var B in n)v(n,B)&&(s=B.toLowerCase(),e[s]=n[B](),q.push((e[s]?"":"no-")+s));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)v(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},w(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e.testStyles=t,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+q.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f..................< Animated Books with CSS 3D Transforms - Demo 1
Previous Demo Back to the Codrops Article

Animated Books with CSS 3D Transforms

    • NEW

      CSS

      TRANSFORM

    CSS Ninja

    By Marco Barría for Codrops

    Tomatillo water chestnut mustard cabbage yarrow sierra leone bologi. Watercress green bean groundnut earthnut pea dandelion radicchio.

    • JS

      FUNCTION

    Storm JS

    By Marco Barría for Codrops

    Leek winter purslane sierra leone bologi caulie tomatillo soko turnip greens bunya nuts silver beet melon green bean celery. Gram kakadu plum wakame.

    • Nº1

      HTML5

      CANVAS

    Zen HTML5

    By Marco Barría for Codrops

    Salsify horseradish winter purslane yarrow zucchini bush tomato aubergine cauliflower broccoli. Kohlrabi azuki bean chickpea quandong dandelion seakale.

    Papelucho Perdido

    By Marcela Paz

    Fennel bamboo shoot pea sprouts rutabaga parsnip green bean gram wattle seed lentil horseradish nori. Grape lettuce turnip greens.

Please note that this only works in browsers that support CSS 3D Transforms. Also note that IE10 does not support preserve-3d which is needed for this demo.