/*Downloaded from https://www.codeseek.co/pixelass/3d-eye-orandxa0pure-css-ZGemve */
body { margin: 0; overflow: hidden; height: 100vh; background: black; }
// appearance
$speed: 16s;
$size: 2em;
// element counter
$stripes: 36;
$items: 18;
$alpha: 0.99;
// square size
$scale-x: 1.05;
$scale-y: 1.025;
$shape-origin: 360deg;
// math stuff
$circumference: $items*$size*2;
$diameter: $circumference/pi();
$radius: $diameter/2;
.pane {
position: absolute;
top: 50%;
left: 50%;
box-shadow: 0 0 0 1px;
height: $diameter;
width: $diameter;
margin: $diameter/-2;
perspective: 700px;
visibility: hidden;
div {
transform-style: preserve-3d;
}
}
.eye {
position: absolute;
top: 50%;
left: 50%;
box-shadow: 0 0 0 1px;
height: $diameter;
width: $diameter;
margin: $diameter/-2;
transform: rotate3d(1,1,0,-30deg);
animation: rot $speed cubic-bezier(.65,-0.25,.51,1.17) infinite;
@keyframes rot {
0%, 100% {
transform: rotate3d(0,0,0,0deg);
}
25% {
transform: rotate3d(0,1,0,45deg);
}
50% {
transform: rotate3d(1,1,0,-25deg);
}
75% {
transform: rotate3d(1,-1,0,-25deg);
}
}
.stripe {
position: absolute;
top: 50%;
left: 50%;
height: $diameter;
width: $size;
margin: $diameter/-2 $size/-2;
@for $i from 0 to $stripes {
&:nth-child(#{$i + 1}) {
transform: rotate(360deg/$stripes*$i);
}
}
}
.item {
position: absolute;
top: 50%;
left: 50%;
height: $size;
width: $size;
margin: $size/-2;
//border-radius: 100%;
background: rgba(#fff,0.99);
visibility: visible;
backface-visibility: hidden;
&:before,
&:after {
content: '';
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: inherit;
clip-path: inherit;
}
&:first-child,
&:last-child {
height: $size/2;
}
@for $i from 0 to ($items + 1) {
&:nth-child(#{$i + 1}) {
$width: abs($size*sin($shape-origin/$stripes*$i));
$prev-width: abs($size*sin($shape-origin/$stripes*($i + 1)));
@if $i == 0 or $i == ($items + 1) {
$width: 0;
}
@if $i > ceil($items/2) + 1 {
$prev-width: abs($size*sin($shape-origin/$stripes*($i - 1)));
}
@if $i == ceil($items/2) + 1 {
$prev-width: $width;
}
$gap: ($prev-width - $width)/2;
width: $prev-width;
margin-left: $prev-width/-2;
@if $i > $items/2 {
clip-path: polygon(
$gap 0%,
0% 100%,
100% 100%,
$prev-width - $gap 0%,
$gap 0%
);
}
@if $i < $items/2 {
clip-path: polygon(
0% 0%,
$gap 100%,
$prev-width - $gap 100%,
100% 0%,
0% 0%
);
}
$step: 100/$items*1.9;
background: linear-gradient(to top,
hsla(0,0%,max(10%,100% - $i*$step),$alpha),
hsla(0,0%,max(10%,100% - ($i + 1)*$step),$alpha));
transform:
rotateX(180deg/$items*$i)
translateZ($radius) scale($scale-x,$scale-y);
}
}
&:nth-child(1) {
background: rgba(#000,$alpha);
}
&:nth-child(2) {
&:before, &:after {
display: none;
}
background:
linear-gradient(to top,
rgba(#515B1F,$alpha) 0%,
rgba(#816B4F,$alpha) 80%);
}
&:nth-child(3) {
&:before, &:after {
display: none;
}
background:
linear-gradient(to top,
rgba(#816B4F,$alpha) 20%,
rgba(#2C3E2E,$alpha) 100%);
box-shadow: inset 0 2px 0 -1px rgba(#000,0.5);
}
}
}