whipped up some 3d fun inspired by the Atom.io logo :-)
A Pen by Sascha Michael Trinkaus on CodePen.
Created
March 6, 2014 09:31
-
-
Save saschamt/9386105 to your computer and use it in GitHub Desktop.
A Pen by Sascha Michael Trinkaus.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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)) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment