For my 5th collaboration with @sandhya_subram we created this 3D Ebook Flip Animation
Design link: https://dribbble.com/shots/14631976-3D-Ebook-Flip-Animation-in-Adobe-XD
A Pen by Saranya Mohan on CodePen.
Created
July 1, 2021 02:20
-
-
Save CodeMyUI/dfa85cc5b1502d29a51cd656ef2db726 to your computer and use it in GitHub Desktop.
3D Ebook Flip Animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="info"> | |
| Mobile - Try tapping | |
| </div> | |
| <div class="mobile-layout"> | |
| <div class="notification-header"> | |
| <div class="time"> | |
| 9:41 | |
| </div> | |
| <div class="necessities"> | |
| <i class="fas fa-signal"></i> | |
| <i class="fas fa-wifi"></i> | |
| <i class="fas fa-battery-full"></i> | |
| </div> | |
| </div> | |
| <div class="actions"> | |
| <i class="fas fa-chevron-left"></i> | |
| <i class="fas fa-bookmark"></i> | |
| </div> | |
| <div class="book-cover"> | |
| <img class="book-top" src="https://saranyamk.github.io/images-repo/book-top.svg" alt="book-top" /> | |
| <img class="book-side" src="https://saranyamk.github.io/images-repo/book-side.svg" alt="book-side" /> | |
| </div> | |
| <div class="preface"> | |
| <div class="content"> | |
| <div class="header"> | |
| <div class="title">The Diary of a Young Girl</div> | |
| <div class="icon"> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| </div> | |
| <div class="author">by Anne Frank</div> | |
| <div class="body"> | |
| <p> | |
| also known as The Diary of Anne Frank, is a book of the writings from the Dutch-language diary kept by Anne Frank while she was in hiding for two years with her family during the Nazi occupation of the Netherlands | |
| </p> | |
| <p> | |
| Anne calls her diary "Kitty", so almost all of the letters are written to Kitty. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- | |
| https://saranyamk.github.io/images-repo/book-top.svg | |
| https://saranyamk.github.io/images-repo/book-side.svg | |
| --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://kit.fontawesome.com/76e9768b91.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| border: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --mobile-width: 325px; | |
| --mobile-height: 670px; | |
| --mobile-radius: 25px; | |
| --separator-height: 500px; | |
| --bg: #fdf3f2; | |
| --mobile-bg: #fdeae6; | |
| --intro-bg: #eed7d1; | |
| --font-color: #807b7b; | |
| --transition: transform 0.7s ease-in-out; | |
| } | |
| .container { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: var(--bg); | |
| } | |
| .info { | |
| font-family: 'Quicksand', sans-serif; | |
| font-family: 'Open Sans', sans-serif; | |
| font-style: italic; | |
| font-size: 26px; | |
| margin-top: 10px; | |
| color: var(--font-color); | |
| } | |
| .mobile-layout { | |
| width: var(--mobile-width); | |
| height: var(--mobile-height); | |
| margin: 30px 0; | |
| border-radius: var(--mobile-radius); | |
| perspective: 500px; | |
| overflow: hidden; | |
| color: var(--font-color); | |
| background-color: var(--mobile-bg); | |
| box-shadow: 36px 36px 50px 15px #eed7d1d1; | |
| .notification-header { | |
| position: fixed; | |
| top: 5px; | |
| width: 100%; | |
| padding: 5px 15px; | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 12px; | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight: bold; | |
| z-index: 6; | |
| } | |
| .actions { | |
| position: fixed; | |
| top: 37px; | |
| width: 100%; | |
| padding: 50px; | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 20px; | |
| z-index: 6; | |
| } | |
| .book-cover { | |
| position: relative; | |
| height: var(--separator-height); | |
| width: calc(var(--mobile-width) * 2); | |
| left: -52.5%; | |
| border-top-left-radius: var(--mobile-radius); | |
| border-top-right-radius: var(--mobile-radius); | |
| background-color: var(--intro-bg); | |
| transform-style: preserve-3d; | |
| transform-origin: 50% 40%; | |
| transition: var(--transition); | |
| z-index: 4; | |
| } | |
| .book-top { | |
| width: 170px; | |
| position: absolute; | |
| top: 180px; | |
| left: 250px; | |
| z-index: 5; | |
| transform: translateZ(28.5px); | |
| } | |
| .book-side { | |
| position: absolute; | |
| top: 430px; | |
| left: 222px; | |
| transform: translateY(-15px) translateX(0px) translateZ(15px) rotateX(104deg); | |
| } | |
| .book-cover:hover { | |
| transform: rotateX(75deg) translateZ(3px) scale(0.75); | |
| } | |
| .book-cover:hover + .preface { | |
| transform: translateY(-302px); | |
| .icon { | |
| transform: rotateX(180deg); | |
| } | |
| } | |
| .preface { | |
| height: var(--separator-height); | |
| padding: 50px; | |
| transition: var(--transition);//cubic-bezier(1,.98,.82,.98); | |
| background: white; | |
| .header { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .title { | |
| //font-family: 'Open Sans', sans-serif; | |
| font-family: 'Quicksand', sans-serif; | |
| font-size: 26px; | |
| margin-bottom: 10px; | |
| } | |
| .author { | |
| font-family: 'Open Sans', sans-serif; | |
| font-style: italic; | |
| margin-bottom: 20px; | |
| } | |
| .icon { | |
| transform-origin: top; | |
| transition: var(--transition); | |
| } | |
| .body { | |
| font-family: 'Quicksand', sans-serif; | |
| } | |
| .body p:first-child { | |
| margin-bottom: 15px; | |
| } | |
| } | |
| } | |
| // .container:hover > .mobile-layout .book-cover { | |
| // transform: rotateX(75deg) translateZ(3px) scale(0.75); | |
| // } | |
| // .container:hover >.mobile-layout .book-cover + .preface { | |
| // transform: translateY(-302px); | |
| // } | |
| // .container:hover > .mobile-layout .book-cover + .preface .icon { | |
| // transform: rotateX(180deg); | |
| // } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;1,300&family=Quicksand:wght@500&display=swap" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hello, can I ask you something, how can I change the book page?