Created
March 9, 2014 20:20
-
-
Save lozandier/9454002 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains 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
-# Dudley's CSS 3D Caption Domino | |
%div{onclick:""} | |
%figure | |
%figcaption Autumn, by Lucien Agasse | |
This file contains 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
// ---- | |
// Sass (v3.3.0) | |
// Compass (v1.0.0.alpha.18) | |
// Breakpoint (v2.4.1) | |
// Singularity.gs (v1.2.0.rc.6) | |
// Toolkit (v2.0.0.alpha.10) | |
// ---- | |
@import compass | |
@import compass/css3 | |
@import breakpoint | |
@import singularitygs | |
@import toolkit | |
@import toolkit/kickstart | |
// Global Variables | |
$breakpoint-to-ems: true | |
$small: max-width 500px | |
$small2: max-width 800px | |
body | |
font-family: sans-serif | |
div | |
+perspective(1000px) | |
width: 33% | |
margin: 3rem auto 0 | |
+breakpoint($small2) | |
width: 50% | |
+breakpoint($small) | |
width: 80% | |
margin-top: 1em | |
&:hover | |
figure | |
+transform( rotateX(75deg) translateZ(5vw) ) | |
&:before | |
+box-shadow( 0 0 25px 250x rgba(#000, .5), inset 0 0 250px 250px rgba(#000, .5) ) | |
+transform( rotateX(-5deg) translateZ(-80px) scale(1) ) | |
figure | |
margin: 0 | |
width: 100% | |
height: 29.5vw | |
background: url("http://lorempixel.com/people/500/500") | |
position: relative | |
background-size: 100% | |
+transform-origin(center, bottom) | |
+transform-style(preserve-3d) | |
+transition(1s transform) | |
+breakpoint($small2) | |
height: 45vw | |
+breakpoint($small) | |
height: 70vw | |
&:before | |
content: "" | |
position: absolute | |
top: 0 | |
left: 0 | |
width: 100% | |
height: 100% | |
+box-shadow(0 0 100px 50px rgba(#000,.1), inset 0 0 250px 250px rgba(#000, .1) ) | |
+transition(1s) | |
+transform( rotateX(95deg) translateZ(-80px) scale(0.75) ) | |
+transform-origin( inherit ) | |
figcaption | |
width: 100% | |
height: 50px | |
position: relative | |
top: 29.5vw | |
background-position: bottom | |
+background( linear-gradient( rgba(#000, .4), rgba(#000, .4) ), url("http://lorempixel.com/people/500/500") ) | |
+background-size(100%) | |
// Have no idea why I needed a Comma here for the figcaption to properly sit below the image. Remove it and see what happens | |
+transform-origin(center, top) | |
+transform(rotateX(-89.9deg)) | |
color: #fff | |
font-size: 1.2vw | |
text-align: center | |
line-height: 3 | |
+breakpoint($small2) | |
top: 45vw | |
font-size: 2vw | |
+breakpoint($small) | |
top: 70vw | |
font-size: 3vw |
This file contains 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
*, *:before, *:after { | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
img, video { | |
max-width: 100%; | |
height: auto; | |
} | |
body { | |
font-family: sans-serif; | |
} | |
div { | |
-moz-perspective: 1000px; | |
-webkit-perspective: 1000px; | |
perspective: 1000px; | |
width: 33%; | |
margin: 3rem auto 0; | |
} | |
@media (max-width: 50em) { | |
div { | |
width: 50%; | |
} | |
} | |
@media (max-width: 31.25em) { | |
div { | |
width: 80%; | |
margin-top: 1em; | |
} | |
} | |
div:hover figure { | |
-moz-transform: rotateX(75deg) translateZ(5vw); | |
-ms-transform: rotateX(75deg) translateZ(5vw); | |
-o-transform: rotateX(75deg) translateZ(5vw); | |
-webkit-transform: rotateX(75deg) translateZ(5vw); | |
transform: rotateX(75deg) translateZ(5vw); | |
} | |
div:hover figure:before { | |
-moz-box-shadow: 0 0 25px 250x rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5); | |
-webkit-box-shadow: 0 0 25px 250x rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5); | |
box-shadow: 0 0 25px 250x rgba(0, 0, 0, 0.5), inset 0 0 250px 250px rgba(0, 0, 0, 0.5); | |
-moz-transform: rotateX(-5deg) translateZ(-80px) scale(1); | |
-ms-transform: rotateX(-5deg) translateZ(-80px) scale(1); | |
-o-transform: rotateX(-5deg) translateZ(-80px) scale(1); | |
-webkit-transform: rotateX(-5deg) translateZ(-80px) scale(1); | |
transform: rotateX(-5deg) translateZ(-80px) scale(1); | |
} | |
figure { | |
margin: 0; | |
width: 100%; | |
height: 29.5vw; | |
background: url("http://lorempixel.com/people/500/500"); | |
position: relative; | |
background-size: 100%; | |
-moz-transform-origin: center bottom; | |
-ms-transform-origin: center bottom; | |
-o-transform-origin: center bottom; | |
-webkit-transform-origin: center bottom; | |
transform-origin: center bottom; | |
-moz-transform-style: preserve-3d; | |
-webkit-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
-moz-transition: 1s transform; | |
-o-transition: 1s transform; | |
-webkit-transition: 1s transform; | |
transition: 1s transform; | |
} | |
@media (max-width: 50em) { | |
figure { | |
height: 45vw; | |
} | |
} | |
@media (max-width: 31.25em) { | |
figure { | |
height: 70vw; | |
} | |
} | |
figure:before { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
-moz-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1), inset 0 0 250px 250px rgba(0, 0, 0, 0.1); | |
-webkit-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1), inset 0 0 250px 250px rgba(0, 0, 0, 0.1); | |
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.1), inset 0 0 250px 250px rgba(0, 0, 0, 0.1); | |
-moz-transition: 1s; | |
-o-transition: 1s; | |
-webkit-transition: 1s; | |
transition: 1s; | |
-moz-transform: rotateX(95deg) translateZ(-80px) scale(0.75); | |
-ms-transform: rotateX(95deg) translateZ(-80px) scale(0.75); | |
-o-transform: rotateX(95deg) translateZ(-80px) scale(0.75); | |
-webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75); | |
transform: rotateX(95deg) translateZ(-80px) scale(0.75); | |
-moz-transform-origin: inherit 50%; | |
-ms-transform-origin: inherit 50%; | |
-o-transform-origin: inherit 50%; | |
-webkit-transform-origin: inherit 50%; | |
transform-origin: inherit 50%; | |
} | |
figure figcaption { | |
width: 100%; | |
height: 50px; | |
position: relative; | |
top: 29.5vw; | |
background-position: bottom; | |
background: -moz-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://lorempixel.com/people/500/500"); | |
background: -o-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://lorempixel.com/people/500/500"); | |
background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://lorempixel.com/people/500/500"); | |
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("http://lorempixel.com/people/500/500"); | |
-moz-background-size: 100%; | |
-o-background-size: 100%; | |
-webkit-background-size: 100%; | |
background-size: 100%; | |
-moz-transform-origin: center top; | |
-ms-transform-origin: center top; | |
-o-transform-origin: center top; | |
-webkit-transform-origin: center top; | |
transform-origin: center top; | |
-moz-transform: rotateX(-89.9deg); | |
-ms-transform: rotateX(-89.9deg); | |
-o-transform: rotateX(-89.9deg); | |
-webkit-transform: rotateX(-89.9deg); | |
transform: rotateX(-89.9deg); | |
color: white; | |
font-size: 1.2vw; | |
text-align: center; | |
line-height: 3; | |
} | |
@media (max-width: 50em) { | |
figure figcaption { | |
top: 45vw; | |
font-size: 2vw; | |
} | |
} | |
@media (max-width: 31.25em) { | |
figure figcaption { | |
top: 70vw; | |
font-size: 3vw; | |
} | |
} |
This file contains 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
<div onclick=''> | |
<figure> | |
<figcaption>Autumn, by Lucien Agasse</figcaption> | |
</figure> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment