[sass] pageflip

Viewer

copydownloadembedprintName: pageflip
  1. :root 
  2.         -rotate-A: 0deg
  3.         -rotate-B: 0deg
  4.         -rotate-C: 0deg
  5.         -translate: 50%
  6.         -z-index-A: 10
  7.         -z-index-B: 5
  8.         -z-index-C: 1
  9.         -cover-color: hsl(150deg, 100%, 15%)
  10.         -page-first-color: hsl(36, 48%, 80%)
  11.         -page-second-color: hsl(36, 48%, 70%)
  12.         -page-last-color: hsl(36, 48%, 25%)
  13.  
  14. * 
  15.         margin: 0
  16.         padding: 0
  17.         box-sizing: border-box
  18.  
  19. .book-container 
  20.         min-height: 100vh
  21.         width: 100vw
  22.         background: radial-gradient(circle at center, hsl(0deg, 0%, 0%), hsl(0deg, 0%, 10%))
  23.         display: grid
  24.         place-content: center
  25.         overflow: hidden
  26.  
  27. .book 
  28.         position: relative
  29.         width: min(100vw, 1000px)
  30.         height: min(60vw, 600px)
  31.         perspective: min(300vw, 3000px)
  32.  
  33. .page-container 
  34.         position: absolute
  35.         height: inherit
  36.         width: min(50vw, 500px)
  37.         cursor: pointer
  38.         transition: .5s transform ease-in-out
  39.         transform-style: preserve-3d
  40.         transform-origin: left
  41.  
  42. .page-A 
  43.         transform: translate(var(--translate)) rotateY(var(--rotate-A))
  44.         z-index: var(--z-index-A)
  45.         &-front 
  46.                 font-family: 'Alice', serif
  47.                 color: #ffcc00
  48.                 display: inline-block
  49.                 position: absolute
  50.                 text-align: center
  51.        
  52.         &-front 
  53.                 font-size: 7.5vh
  54.        
  55.  
  56. .page-B 
  57.         transform: translate(var(--translate)) rotateY(var(--rotate-B))
  58.         z-index: var(--z-index-B)
  59.  
  60. .page-C 
  61.         transform: translate(var(--translate)) rotateY(var(--rotate-C))
  62.         z-index: var(--z-index-C)
  63.  
  64. .page 
  65.         position: absolute
  66.         backface-visibility: hidden
  67.         height: inherit
  68.         width: inherit
  69.         padding: min(10px, 1vw) min(15px, 1.5vw)
  70.         &-A-front, &-C-back 
  71.                 background: var(--cover-color)
  72.                 background-image: url('https
  73.                 background-size: contain
  74.                 background-repeat: no-repeat
  75.        
  76.         &-A-back, &-B-back 
  77.                 background: linear-gradient(90deg, var(--page-first-color) 30%, var(--page-second-color), var(--page-last-color))
  78.        
  79.         &-B-front, &-C-front 
  80.                 background: linear-gradient(90deg, var(--page-last-color), var(--page-second-color), var(--page-first-color) 60%) 
  81.        
  82.         &-A-back, &-B, &-C-front 
  83.                 line-height: min(24px, 2.4vw)
  84.                 font-size: min(16px, 1.6vw)
  85.                 margin-bottom: min(5px, 0.5vw)
  86.        
  87.         &-container 
  88.                 position: absolute
  89.                 height: inherit
  90.                 width: 100vw
  91.                 transform-origin: top
  92.        
  93.         &-A 
  94.                 transform: translateY(calc(-50% 
  95.        
  96.         &-B 
  97.                 transform: translateY(calc(-50% 
  98.        
  99.         &-C 
  100.                 transform: translateY(calc(-50% 
  101.        
  102.         &-A-front, &-C-back 
  103.                 background-image: none
  104.        
  105.         &-A-back, &-B-back 
  106.                 background: linear-gradient(180deg, var(--page-first-color) 50%, var(--page-second-color) , var(--page-last-color))
  107.        
  108.         &-B-front, &-C-front 
  109.                 background: linear-gradient(180deg, var(--page-last-color), var(--page-second-color), var(--page-first-color) 50%) 
  110.        
  111.         &-A-back, &-B, &-C-front 
  112.                 line-height: 2vh
  113.                 font-size: 1.6vh
  114.                 margin-bottom: 0.5vh
  115.        
  116.  
  117. .front 
  118.         border-radius: 5px 15px 15px 5px
  119.  
  120. .back 
  121.         border-radius: 15px 5px 5px 15px
  122.         transform: rotateY(180deg)
  123.  
  124. h1 
  125.         font-size: min(56px, 5.6vw)
  126.         display: inline-block
  127.         position: absolute
  128.         text-align: center
  129.         top: 35%
  130.         left: 50%
  131.         text-shadow: 5px 2.5px 0 hsl(0deg, 0%, 0%, .25)
  132.         transform: translate(-50%, -50%)
  133.  
  134. h2 
  135.         font-size: min(24px, 2.4vw)
  136.         bottom: 10%
  137.         left: 50%
  138.         transform: translateX(-50%)
  139.  
  140. h3 
  141.         font-size: min(16px, 1.6vw)
  142.         font-style: italic
  143.         top: 60%
  144.         left: 50%
  145.         transform: translate(-50%, -50%)
  146.  
  147. p::first-letter 
  148.         font-size: min(24px, 2.4vw)
  149.  
  150. .signature 
  151.         position: absolute
  152.         left: 0
  153.         bottom: 0
  154.  
  155. .link 
  156.         position: absolute
  157.         z-index: 10
  158.         left: calc(5vmin - 1rem)
  159.         bottom: calc(5vmin - 1rem)
  160.         display: flex
  161.         align-items: center
  162.         justify-content: center
  163.         cursor: pointer
  164.         font-size: 2rem
  165.         font-family: arial, sans-serif
  166.         color: #ffcc00
  167.  
  168. .my-name 
  169.         position: relative
  170.  
  171. .before, .after 
  172.         overflow: hidden
  173.         width: 0px
  174.         transition: width 0.5s
  175.         transform-origin: right
  176.  
  177. .before-text 
  178.         display: inline-block
  179.         width: auto
  180.         text-align: right
  181.  
  182. .after-text 
  183.         display: flex
  184.         align-items: center
  185.         width: auto
  186.         height: 3rem
  187.         transform-origin: top center
  188.  
  189. :hover .before 
  190.         width: 3.5rem
  191.  
  192. :hover .after 
  193.         width: 5rem
  194.  
  195. :hover .spin 
  196.         display: inline-block
  197.         transition: 0.5s transform 0.5s ease-in-out
  198.         transform: rotate(360deg)
  199.  
  200. media only screen and (max-width: 767px) and (orientation: portrait) 
  201.         width: 100vw
  202.         height: 50vh
  203.  
  204. .front 
  205.         border-radius: 5px 5px 15px 15px
  206.  
  207. .back 
  208.         border-radius: 15px 15px 5px 5px
  209.         transform: rotateX(180deg)
  210.  
  211. h2 
  212.         font-size: 3vh
  213.  
  214. h3 
  215.         font-size: 2vh
  216.  
  217. p::first-letter 
  218.         font-size: 2.4vh
  219.  
  220.  

Editor

You can edit this paste and save as new: