Skip to content

Instantly share code, notes, and snippets.

@failamir

failamir/index.pug

Created April 22, 2019 14:45
Show Gist options
  • Save failamir/7e32c338536b531fd5a6727a296bdb2a to your computer and use it in GitHub Desktop.
Save failamir/7e32c338536b531fd5a6727a296bdb2a to your computer and use it in GitHub Desktop.
Download ZIP
Only CSS: 3D Scan
Raw
index.pug
.container
- for (i = 0; i < 400; i++)
.trigger
.monitor
.camera.o-x
.camera.o-y
.camera.o-z
.vr
- for (i = 0; i < 20; i++)
.vr_layer
.vr_layer_item
Raw
style.scss
$size: 350px;
$layer: 20;
body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
height: 100vh;
overflow: hidden;
display: flex;
font-family: 'Anton', sans-serif;
justify-content: center;
align-items: center;
perspective: 1000px;
}
.container {
position: relative;
display: grid;
grid-template-rows: repeat(20, 5vh);
grid-template-columns: repeat(20, 5vw);
transform-style: preserve-3d;
}
.monitor {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
transform-style: preserve-3d;
}
.trigger {
@for $i from 1 through 20 {
@for $j from 1 through 20 {
$key: ($i - 1) * 20 + $j;
&:nth-child(#{$key}) {
&:hover ~ .monitor {
.camera {
&.o-y {
transform: rotateY(($j - 10) * -8deg);
}
&.o-x {
transform: rotateX(($i - 10) * 8deg);
}
}
}
}
}
}
}
.camera {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: 500ms;
&.o-y {
transform: rotateY(-30deg);
}
}
.vr {
position: absolute;
top: 50%;
left: 50%;
width: $size;
height: $size;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
&_layer {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border: 1px solid rgba(#fff, 0.2);
background: rgba(#09f, 0.006);
border-radius: 10px;
transform: preserve-3d;
@for $i from 1 through $layer {
&:nth-child(#{$i}) {
transform: translateZ($i * $size / $layer - $size / 2);
}
&:nth-child(#{$i}) &_item {
animation-delay: $i * -210ms;
}
}
&_item {
width: 70%;
height: 70%;
border: 3px solid #fff;
border-radius: 100%;
background: rgba(#000, 0.05);
animation: sphere 3000ms cubic-bezier(0.215, 0.610, 0.355, 1.000) alternate infinite, color 5000ms linear alternate infinite;
}
}
}
@keyframes sphere {
0% {
transform: scale(0);
}
50% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes color {
0% {
border-color: #f55;
}
50% {
border-color: #55f;
}
100% {
border-color: #5f5;
}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment