whipped up some 3d fun inspired by the Atom.io logo :-)
A Pen by Sascha Michael Trinkaus on CodePen.
whipped up some 3d fun inspired by the Atom.io logo :-)
A Pen by Sascha Michael Trinkaus on CodePen.
.pane | |
.cube | |
.side | |
.side | |
.side | |
.side | |
.side | |
.side | |
.circle | |
.atomWrap | |
.atom | |
.circle.two | |
.atomWrap | |
.atom | |
.circle.three | |
.atomWrap | |
.atom | |
.circle.four | |
.atomWrap | |
.atom | |
.circle.five | |
.atomWrap | |
.atom | |
.shadow |
@import "compass" | |
$green: #07190a | |
$size: 100px | |
$diametre: $size*3 | |
$atomDiametre: $diametre / 60 | |
$diametre2: $size*2.5 | |
$atomDiametre2: $diametre2 / 60 | |
html | |
width: 100% | |
height: 100% | |
body | |
+background-image(linear-gradient(180deg, rgba(($green + 180),.5), rgba(($green + 20),.5) 80%), radial-gradient(circle, lighten(saturate($green,20), 20), $green + 40 $size * 0.5, black 100%)) | |
perspective: 1000px | |
+keyframes(pane) | |
to | |
+transform(rotateX(-720deg) rotateY(-720deg) rotateZ(-360deg)) | |
+keyframes(cube) | |
to | |
+transform(rotateX(720deg) rotateY(720deg) rotateZ(360deg)) | |
+keyframes(circle) | |
to | |
+transform(rotateX(360deg) rotateY(-360deg) rotateZ(720deg)) | |
+keyframes(circle2) | |
to | |
+transform(rotateX(-360deg) rotateY(360deg) rotateZ(-720deg)) | |
+keyframes(atomWrap) | |
to | |
+transform(rotate(360deg)) | |
.pane | |
position: absolute | |
margin: auto | |
left: 0 | |
right: 0 | |
top: 0 | |
bottom: 0 | |
width: $diametre | |
height: $diametre | |
+transform-style(preserve-3d) | |
+transform(rotateX(0deg) rotateY(0deg) rotateZ(0deg)) | |
+animation(pane 15s linear infinite) | |
.cube | |
position: absolute | |
margin: auto | |
left: 0 | |
right: 0 | |
top: 0 | |
bottom: 0 | |
width: $size | |
height: $size | |
+transform-style(preserve-3d) | |
+transform(rotateX(0deg) rotateY(0deg) rotateZ(0deg)) | |
+transform-origin(center center $size/2) | |
+animation(cube 5s linear infinite) | |
.side | |
width: $size | |
height: $size | |
position: absolute | |
opacity: 0.2 | |
box-shadow: inset 0 50px 50px 0 rgba(lighten(saturate($green,100), 50),.5) | |
&:nth-of-type(1), | |
&:nth-of-type(2), | |
&:nth-of-type(3) | |
+background-image(linear-gradient(45deg, $green - 20, lighten(saturate($green,50), 70))) | |
&:nth-of-type(4), | |
&:nth-of-type(5), | |
&:nth-of-type(6) | |
+background-image(linear-gradient(-45deg, $green - 20, lighten(saturate($green,50), 70))) | |
&:nth-of-type(1) | |
+transform-origin(center top) | |
+transform(rotateX(90deg)) | |
&:nth-of-type(2) | |
+transform-origin(center bottom) | |
+transform(rotateX(-90deg)) | |
&:nth-of-type(3) | |
+transform-origin(left center) | |
+transform(rotateY(-90deg)) | |
&:nth-of-type(4) | |
+transform-origin(right center) | |
+transform(rotateY(90deg)) | |
&:nth-of-type(5) | |
+transform-origin(center center) | |
+transform(translateZ($size)) | |
.circle | |
width: $diametre | |
height: $diametre | |
position: absolute | |
margin: auto | |
left: 0 | |
right: 0 | |
top: 0 | |
bottom: 0 | |
border-radius: 50% | |
box-shadow: inset 0 0 0 1px rgba(lighten(saturate($green,50), 10),.25) | |
+transform-style(preserve-3d) | |
+transform(rotateX(0deg) rotateY(0deg) rotateZ(0deg)) | |
+transform-origin(center center center) | |
+animation(circle 10s linear infinite) | |
&.two | |
+animation(circle 18s linear infinite) | |
&.three | |
+animation(circle 5s linear infinite) | |
&.four, | |
&.five | |
width: $diametre2 | |
height: $diametre2 | |
.atomWrap | |
width: $atomDiametre2 | |
height: $atomDiametre2 | |
.atom | |
width: $atomDiametre2 | |
height: $atomDiametre2 | |
&.four | |
+animation(circle2 20s linear infinite) | |
&.five | |
+animation(circle2 10s linear infinite) | |
.atomWrap | |
width: $atomDiametre | |
height: $diametre / 2 | |
position: absolute | |
margin: 0 auto | |
left: 0 | |
right: 0 | |
top: 0 | |
+transform-origin(center bottom) | |
+animation(atomWrap 3s linear infinite) | |
.atom | |
$atomSize: $atomDiametre | |
position: absolute | |
margin: 0 auto | |
left: 0 | |
right: 0 | |
top: - $atomDiametre / 2 | |
width: $atomSize | |
height: $atomSize | |
border-radius: 50% | |
background: lighten(saturate($green,50), 70) | |
.shadow | |
width: $size * 1.5 | |
height: $size | |
position: absolute | |
background-color: rgba(black, .1) | |
margin: auto | |
left: 0 | |
right: 0 | |
top: 0 | |
bottom: 0 | |
border-radius: 50% | |
+transform(rotateX(100deg) translateY(- $diametre * 2.5)) |