Skip to content

Instantly share code, notes, and snippets.

@saschamt
Created March 6, 2014 09:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save saschamt/9386105 to your computer and use it in GitHub Desktop.
Save saschamt/9386105 to your computer and use it in GitHub Desktop.
A Pen by Sascha Michael Trinkaus.
.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))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment