Skip to content

Instantly share code, notes, and snippets.

@layerssss
Created September 8, 2014 13:45
Show Gist options
  • Save layerssss/81f9ade341f7ec4f2aea to your computer and use it in GitHub Desktop.
Save layerssss/81f9ade341f7ec4f2aea to your computer and use it in GitHub Desktop.
A Pen by Michael Yin.
.l
.front-1.front
.front-2.front
.left
.bottom
.top-1
.top-2
.right-1
.right-2
.l
font-size: 20em
overflow: visible
margin: 20px auto
width: 1em
position: relative
transform-style: preserve-3d
transform-origin: 0 1em
perspective: 1500px
transition: all 2s ease
transform: rotate3d(-2, -4, 2, 20deg)
&>*
background-color: yellow
position: absolute
transform-origin: top left
box-sizing: border-box
border: dashed 1px black
&>.front
background-color: yellow
&>:not(.front)
box-shadow: 0 0 .05em orange
.front-1
left: 0
top: 0
width: .1em
height: 1em
.front-2
top: .9em
left: .1em
width: .4em
height: .1em
.left
top: 0
left: 0
width: .1em
height: 1em
transform: rotateY(90deg)
.right-1
top: 0
left: .1em
width: .1em
height: .9em
transform: rotateY(90deg)
.right-2
top: .9em
left: .5em
width: .1em
height: .1em
transform: rotateY(90deg)
.bottom
top: 1em
left: 0
width: .5em
height: .1em
transform: rotateX(-90deg)
.top-1
top: 0
left: 0
width: .1em
height: .1em
transform: rotateX(-90deg)
.top-2
top: .9em
left: .1em
width: .4em
height: .1em
transform: rotateX(-90deg)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment