[sass] pageflip
Viewer
- :root
- -rotate-A: 0deg
- -rotate-B: 0deg
- -rotate-C: 0deg
- -translate: 50%
- -z-index-A: 10
- -z-index-B: 5
- -z-index-C: 1
- -cover-color: hsl(150deg, 100%, 15%)
- -page-first-color: hsl(36, 48%, 80%)
- -page-second-color: hsl(36, 48%, 70%)
- -page-last-color: hsl(36, 48%, 25%)
- *
- margin: 0
- padding: 0
- box-sizing: border-box
- .book-container
- min-height: 100vh
- width: 100vw
- background: radial-gradient(circle at center, hsl(0deg, 0%, 0%), hsl(0deg, 0%, 10%))
- display: grid
- place-content: center
- overflow: hidden
- .book
- position: relative
- width: min(100vw, 1000px)
- height: min(60vw, 600px)
- perspective: min(300vw, 3000px)
- .page-container
- position: absolute
- height: inherit
- width: min(50vw, 500px)
- cursor: pointer
- transition: .5s transform ease-in-out
- transform-style: preserve-3d
- transform-origin: left
- .page-A
- transform: translate(var(--translate)) rotateY(var(--rotate-A))
- z-index: var(--z-index-A)
- &-front
- font-family: 'Alice', serif
- color: #ffcc00
- display: inline-block
- position: absolute
- text-align: center
- &-front
- font-size: 7.5vh
- .page-B
- transform: translate(var(--translate)) rotateY(var(--rotate-B))
- z-index: var(--z-index-B)
- .page-C
- transform: translate(var(--translate)) rotateY(var(--rotate-C))
- z-index: var(--z-index-C)
- .page
- position: absolute
- backface-visibility: hidden
- height: inherit
- width: inherit
- padding: min(10px, 1vw) min(15px, 1.5vw)
- &-A-front, &-C-back
- background: var(--cover-color)
- background-image: url('https
- background-size: contain
- background-repeat: no-repeat
- &-A-back, &-B-back
- background: linear-gradient(90deg, var(--page-first-color) 30%, var(--page-second-color), var(--page-last-color))
- &-B-front, &-C-front
- background: linear-gradient(90deg, var(--page-last-color), var(--page-second-color), var(--page-first-color) 60%)
- &-A-back, &-B, &-C-front
- line-height: min(24px, 2.4vw)
- font-size: min(16px, 1.6vw)
- margin-bottom: min(5px, 0.5vw)
- &-container
- position: absolute
- height: inherit
- width: 100vw
- transform-origin: top
- &-A
- transform: translateY(calc(-50%
- &-B
- transform: translateY(calc(-50%
- &-C
- transform: translateY(calc(-50%
- &-A-front, &-C-back
- background-image: none
- &-A-back, &-B-back
- background: linear-gradient(180deg, var(--page-first-color) 50%, var(--page-second-color) , var(--page-last-color))
- &-B-front, &-C-front
- background: linear-gradient(180deg, var(--page-last-color), var(--page-second-color), var(--page-first-color) 50%)
- &-A-back, &-B, &-C-front
- line-height: 2vh
- font-size: 1.6vh
- margin-bottom: 0.5vh
- .front
- border-radius: 5px 15px 15px 5px
- .back
- border-radius: 15px 5px 5px 15px
- transform: rotateY(180deg)
- h1
- font-size: min(56px, 5.6vw)
- display: inline-block
- position: absolute
- text-align: center
- top: 35%
- left: 50%
- text-shadow: 5px 2.5px 0 hsl(0deg, 0%, 0%, .25)
- transform: translate(-50%, -50%)
- h2
- font-size: min(24px, 2.4vw)
- bottom: 10%
- left: 50%
- transform: translateX(-50%)
- h3
- font-size: min(16px, 1.6vw)
- font-style: italic
- top: 60%
- left: 50%
- transform: translate(-50%, -50%)
- p::first-letter
- font-size: min(24px, 2.4vw)
- .signature
- position: absolute
- left: 0
- bottom: 0
- .link
- position: absolute
- z-index: 10
- left: calc(5vmin - 1rem)
- bottom: calc(5vmin - 1rem)
- display: flex
- align-items: center
- justify-content: center
- cursor: pointer
- font-size: 2rem
- font-family: arial, sans-serif
- color: #ffcc00
- .my-name
- position: relative
- .before, .after
- overflow: hidden
- width: 0px
- transition: width 0.5s
- transform-origin: right
- .before-text
- display: inline-block
- width: auto
- text-align: right
- .after-text
- display: flex
- align-items: center
- width: auto
- height: 3rem
- transform-origin: top center
- :hover .before
- width: 3.5rem
- :hover .after
- width: 5rem
- :hover .spin
- display: inline-block
- transition: 0.5s transform 0.5s ease-in-out
- transform: rotate(360deg)
- media only screen and (max-width: 767px) and (orientation: portrait)
- width: 100vw
- height: 50vh
- .front
- border-radius: 5px 5px 15px 15px
- .back
- border-radius: 15px 15px 5px 5px
- transform: rotateX(180deg)
- h2
- font-size: 3vh
- h3
- font-size: 2vh
- p::first-letter
- font-size: 2.4vh
Editor
You can edit this paste and save as new: