Skip to content

Instantly share code, notes, and snippets.

Created Apr 25, 2017
What would you like to do?
Vertigo Effect
Choreographs two layers moving closer and further from the 'camera'. Hitchcock would have dollied and zoomed, we just translateZ.
Lokesh Dhakar
$('button').on('click', function() {
<script src=""></script>
$orig-width: 600px
$orig-height: 383px
$width: $orig-width * 1.25
$height: $orig-height * 1.25
box-sizing: border-box
position: absolute
perspective: 400px
width: $width
height: $height
overflow: hidden
transform-style: preserve-3d
transition: perspective 5s
z-index: 10
z-index: 5
position: absolute
top: 0
left: 0
width: $width
height: $height
transition: all 5s
z-index: 10
background-image: url(
background-size: cover
background-image: url(
transform: translateZ(150px)
background-size: cover
transform: translateZ(200px)
transform: translateZ(0)
filter: blur(4px)
-webkit-filter: blur(4px)
position: fixed
top: 10px
left: 10px
z-index: 100
width: 84px
padding: 10px
color: black
font-weight: bold
background: gold
border: 2px solid black
text-transform: uppercase
cursor: pointer
text-align: center
outline: none
border-radius: 4px
background: lighten(gold, 10%)
color: gold
background: black
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment