.body
.content Here is title
.sl.slice01
span.overlay
.sl.slice02
span.overlay
.sl.slice03
span.overlay
.sl.slice04
span.overlay
.sl.slice05
span.overlay
View Compiled
@import compass
$fold: 45deg
body
padding: 40px
font-family: Lato,sans-serif
font-size: 1em
font-weight: 300
.body
-webkit-perspective: 800
position: relative
width: 400px
height: 200px
background-color: hsl(340,50%,50%)
+background(linear-gradient( left, hsl(340,80%,20%) 40%, hsl(340,50%,50%) 80% ))
> .content
position: absolute
right: 20px
top: 20px
color: #fff
.overlay
width: 100%
height: 100%
background-color: rgba(0,0,0,0)
display: block
position: absolute
overflow: hidden
.sl
width: 81px
height: 200px
position: absolute
-webkit-transform-style: preserve-3d
-webkit-transform-origin: left center
background-color: #f5f5f5
.slice02,
.slice03,
.slice04,
.slice05
left: 100%
margin-left: -1px
.slice01,
.slice03,
.slice05
+transform(rotateY($fold*-2))
& > .overlay
+background(linear-gradient(left, hsla(200,50%,20%,.25), hsla(200,50%,20%,.15) 50%))
.slice02,
.slice04
+transform(rotateY($fold*2))
> .overlay
&:before
+background(linear-gradient(left, hsla(200,50%,20%,.5) 50%, hsla(200,50%,20%,.75)))
+transform(skewY(-45deg) scaleX(.5))
+transform-origin(right)
+box-shadow(-5px 0px 0 hsla(200,50%,20%,.25), -10px 0px 0 hsla(200,50%,20%,.15), -15px 0px 0 hsla(200,50%,20%,.1))
content: ' '
width: 100%
height: 100%
overflow: hidden
position: absolute
left: 0
top: 0
opacity: .25
.slice01
left: 0
+transform(rotateY($fold*-1))
.body
.sl,
.overlay
+transition(all 1s ease)
&:before
+transition(all 1s ease)
.body:hover
.sl
+transform(rotateY(0))
.overlay
opacity: 0
&:before
+transform(skewY(-90deg) scaleX(.5))
.slice02
background-position: -81px 0
.slice03
background-position: -81px*2 0
.slice04
background-position: -81px*3 0
.slice05
background-position: -81px*4 0
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.