Skip to content

Instantly share code, notes, and snippets.

@OhBonsai

OhBonsai/3d-book-browsing.markdown

Created February 12, 2020 09:51
Show Gist options
  • Save OhBonsai/414a97f9ccaa36dbe12334b2d047f6d8 to your computer and use it in GitHub Desktop.
Save OhBonsai/414a97f9ccaa36dbe12334b2d047f6d8 to your computer and use it in GitHub Desktop.
Download ZIP
3D Book Browsing
Raw
3d-book-browsing.markdown

3D Book Browsing

A CSS-only demo that simulates picking books off a shelf and previewing a page (on hover) in first-person. It all works using labels and offscreen radio inputs for each book, and a reset input as a Return button allows you to put everything back to its original position. I made up almost all the titles which parody random novels, developer attitudes, and some dark Internet things.

Notes

  • No 3D support in IE
  • Strange state animation behavior in Safari I have no idea how to fix

A Pen by Jon Kantner on CodePen.

License.

Raw
index.pug
- var blocks = 16;
- var title = ["The Color Chucknorris", "The Phisherman and His Wife", "The Little Browser Engine That Couldn’t", "The DOM-Tree", "Sliding Into Auto-DMs", "Copying and Pasting from Stack Overflow","WordPress Updates Breaking Stuff","Waiting for Internet Explorer to Die","Copypaste Customer Support","Catchy Clickbait Titles and Buzzwords","Spamming with Scrapebox"];
- var bookStart = 6;
- var dummyText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
mixin bookTitle(t)
- if (t >= bookStart && t < bookStart + title.length) {
.spine=title[t - bookStart]
- }
mixin divBlock(d)
div(class="block b" + d)
.block-inner
.back
.bottom
.front
.left
.right
.top
mixin labelBlock(l)
- var bookId = l - bookStart;
label(for="book" + (bookId + 1),class="block b" + l)
.block-inner
.back
.bottom
.front
+bookTitle(l)
.left
.right(data-title=title[bookId])
.cover
.contents
h1="Chapter 1"
p=dummyText
.top
form.container
- for (var r = 1; r <= title.length; ++r) {
input(type="radio",name="title",id="book" + r)
- }
.surface
- for (var b = 1;b <= blocks;++b) {
- if (b >= bookStart && b < bookStart + title.length) {
+labelBlock(b)
- }
- else {
+divBlock(b)
- }
- }
input(type="reset",value="Return")
Raw
style.scss
$sqSize: 16px;
$contW: 100%;
$contH: 100%;
$xSpaces: 24;
$ySpaces: 14;
$zSpaces: 19;
$xAngle: 80deg;
$zAngle: 0deg;
$books: 11;
$bookStart: 6;
$trans: 0.25s;
// font sizing
$fFontSize: $sqSize*0.75;
$rFontSize: $sqSize*1.5;
$cntntFontSize: $sqSize*0.7;
// non-book colors
$btnColor: #c22;
$shelfColor: #441e12;
/* Block placement */
// parameters: x-pos,y-pos,z-pos, width,depth,height, color, is-book
$blocks:
// shelf
(2,1,1, 22,14,1, $shelfColor, false),
(1,14,1, 24,1,18, $shelfColor, false),
(1,1,1, 1,13,18, $shelfColor, false),
(24,1,1, 1,13,18, $shelfColor, false),
(1,1,19, 24,14,1, $shelfColor, false),
// books
(2,3,2, 2,11,14, #c00000, true),
(4,3,2, 2,11,15, #891a21, true),
(6,3,2, 2,10,16, #bf3e22, true),
(8,3,2, 2,10,14, #0e4326, true),
(10,3,2, 2,11,15, #0066cc, true),
(12,3,2, 2,11,16, #0f7b7e, true),
(14,3,2, 2,10,15, #084e6f, true),
(16,3,2, 2,11,16, #0b0823, true),
(18,3,2, 2,10,14, #38103d, true),
(20,3,2, 2,10,15, #443344, true),
(22,3,2, 2,10,16, #666777, true);
@mixin grid($c, $s) {
$fontS: $s/3;
$xC: #c00;
$yC: #080;
background-image:
repeating-linear-gradient(
180deg,
$c,
$c 1px,
transparent 1px,
transparent $s
),
repeating-linear-gradient(
-90deg,
$c,
$c 1px,
transparent 1px,
transparent $s
);
border-bottom: 1px solid $xC;
border-left: 1px solid $yC;
&::before, &::after {
display: block;
font-size: $fontS;
position: absolute;
text-align: center;
width: $fontS;
height: $fontS;
}
&::before {
color: $yC;
content: "y";
top: 0;
left: -$fontS;
}
&::after {
color: $xC;
content: "x";
right: 0;
bottom: -$fontS;
}
}
@mixin placeBlock($x, $y, $z, $w, $d, $h, $c, $isBook) {
display: block;
transform: translate3d(
$sqSize*($x - 1),
$sqSize*(-$y - ($d - 1)),
($sqSize*$z) + ($sqSize*($h - 1))
);
.block-inner > div {
background-color: $c;
&.top, &.bottom {
width: $sqSize * $w;
height: $sqSize * $d;
}
&.top {
transform: rotateX(-90deg) translateY(-$sqSize*($d - 1));
}
&.bottom {
transform: rotateX(-90deg) translateY(-$sqSize*($d - 1)) translateZ($sqSize*$h);
}
&.front, &.back, &.left, &.right {
&::before {
background-color: #000;
content: "";
width: 100%;
height: 100%;
}
}
&.front, &.back {
width: $sqSize * $w;
height: $sqSize * $h;
&::before {
opacity: 0.2;
}
}
&.front {
transform: translateZ($sqSize * ($d - 1));
}
&.left, &.right {
width: $sqSize * $d;
height: $sqSize * $h;
@if ($isBook == true) {
&::before {
opacity: 0;
}
}
@else {
&::before {
opacity: 0.4;
}
}
}
&.right {
transform: rotateY(-270deg) translate3d($sqSize, 0, $sqSize*($w - $d));
transform-style: preserve-3d;
@if ($isBook == true) {
background-color: #fff;
&::after {
background-color: $c;
content: attr(data-title);
}
}
}
@if ($isBook == true) {
$pgC: #aaa;
&.top, &.back, &.bottom, {
background: {
color: #fff;
image: repeating-linear-gradient(90deg,transparent, transparent 21%, $pgC 21%, $pgC 25%, transparent 25%, transparent 46%, $pgC 46%, $pgC 50%, transparent 50%);
size: $sqSize $sqSize;
};
}
}
}
}
:root {
font-size: 20px;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, input {
font-family: "Hind", sans-serif;
font-size: 1em;
}
body {
background-color: #ccc;
height: 100vh;
margin: 0;
}
input {
position: absolute;
}
input[type=radio] {
top: -20px;
left: -20px;
&:checked ~ input[type=reset] {
visibility: visible;
}
}
input[type=reset] {
background-color: $btnColor;
border: 0;
border-radius: 0;
color: #fff;
padding: 0.5em 0.75em;
bottom: 5%;
left: 50%;
visibility: hidden;
transform: translateX(-50%);
transition: background-color 0.2s;
-webkit-appearance: none;
appearance: none;
&:hover, &:focus {
background-color: $btnColor + #222;
}
&:active {
background-color: $btnColor - #222;
}
}
.container {
animation: fadeIn $trans $trans linear forwards;
display: flex;
margin: auto;
opacity: 0;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: $contW;
height: $contH;
perspective: 800px;
transform-style: preserve-3d;
}
.surface {
//@include grid(#888, $sqSize);
display: block;
width: $sqSize * $xSpaces;
height: $sqSize * $ySpaces;
margin: auto;
transform-style: preserve-3d;
transform: translateY($sqSize * $zSpaces/2) rotateX($xAngle) rotateZ($zAngle);
transition: transform $trans;
will-change: transform;
}
.block {
display: none;
transform-style: preserve-3d;
position: absolute;
bottom: 0;
}
.block-inner div {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
position: absolute;
width: $sqSize;
height: $sqSize;
}
.block-inner {
position: relative;
width: $sqSize;
transition: transform $trans linear;
transform-style: preserve-3d;
transform: rotateX(-90deg) translateZ($sqSize);
}
.back {
transform: translateZ(-$sqSize) rotateY(180deg);
}
.left {
transform-origin: center left;
transform: rotateY(270deg) translateX(-$sqSize);
}
.right {
transform-origin: top right;
&::after, div {
top: 0;
left: 0;
transform-origin: 0 50%;
transition: transform $trans $trans linear;
}
&::after {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
color: #fff;
font-size: $rFontSize;
line-height: $rFontSize;
text-align: center;
padding: 20% 5%;
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
div {
width: 100%;
height: 100%;
}
}
.top, .bottom {
transform-origin: top center;
}
.spine, .right::after, .contents h1 {
font: {
family: "Lora", serif;
weight: bold;
};
-webkit-font-smoothing: antialiased;
}
.spine {
background: transparent;
color: #ccc;
font-size: $fFontSize;
line-height: $fFontSize;
top: 0;
left: 0;
transform: rotate(90deg) translate($sqSize*0.75,-50%);
white-space: nowrap;
width: 0;
height: $sqSize;
}
.cover {
background-color: #fff;
z-index: 1;
}
.contents {
font-size: $cntntFontSize;
padding: $sqSize;
h1 {
font-size: 2em;
}
p {
font-family: "Source Sans Pro", serif;
}
}
// * Render blocks *
// one block only
@if length(nth($blocks,1)) == 1 {
.b1 {
@include placeBlock(
nth($blocks, 1),
nth($blocks, 2),
nth($blocks, 3),
nth($blocks, 4),
nth($blocks, 5),
nth($blocks, 6),
nth($blocks, 7),
nth($blocks, 8)
);
}
}
// more than one block
@else {
@for $b from 1 through length($blocks) {
.b#{$b} {
@include placeBlock(
nth(nth($blocks, $b), 1),
nth(nth($blocks, $b), 2),
nth(nth($blocks, $b), 3),
nth(nth($blocks, $b), 4),
nth(nth($blocks, $b), 5),
nth(nth($blocks, $b), 6),
nth(nth($blocks, $b), 7),
nth(nth($blocks, $b), 8)
);
}
}
}
/* Book Viewing */
label:nth-child(n+#{$bookStart}):nth-child(-n+#{$bookStart + $books}):hover .block-inner {
transform: rotateX(-90deg) translateZ($sqSize*4);
}
@for $i from 1 through $books {
input[type=radio]:nth-child(#{$i}) ~ .surface {
label:nth-child(#{$i + $bookStart - 1}) .block-inner {
animation: returnBook $trans linear;
}
}
input[type=radio]:nth-child(#{$i}):checked ~ .surface {
transform: translate(50% - (0% + ((2/$xSpaces) * 100) * $i),$sqSize * $zSpaces/2) rotateX($xAngle) rotateZ($zAngle);
label:nth-child(#{$i + $bookStart - 1}) .block-inner {
animation: viewBook $trans $trans linear forwards;
&:hover {
.right::after, .cover {
transform: rotateY(-135deg);
}
}
}
}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes viewBook {
from {transform: rotateX(-90deg) translateZ($sqSize*4) rotateY(0);}
50% {transform: rotateX(-90deg) translateZ($sqSize*15) rotateY(0);}
to {transform: rotateX(-90deg) translateZ($sqSize*15) rotateY(-90deg) rotateZ(-90deg + $xAngle) translateZ($sqSize*-5);}
}
@keyframes returnBook {
from {transform: rotateX(-90deg) translateZ($sqSize*15) rotateY(-90deg) rotateZ(-90deg + $xAngle) translateZ($sqSize*-5);}
50% {transform: rotateX(-90deg) translateZ($sqSize*15) rotateY(0);}
to {transform: rotateX(-90deg) translateZ($sqSize) rotateY(0);}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment