A Pen by Andrea Usseglio Gaudi.

Hxcme.markdown

Perspective test

A Pen by Andrea Usseglio Gaudi on CodePen.

License.

index.html

<ul>
   <li>Click me!</li>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

script.js

$(window).unbind("scroll");
$(window).scroll(function() {
$("ul").css({"-webkit-perspective-origin-y":$(window).scrollTop() + $(window).height()/2})
$("ul").css({"-webkit-perspective-origin-x":$(window).scrollLeft() + $(window).outerWidth()/2})

})

$(document).ready(function() {
  $("li").on("click", function() {
    $(this).toggleClass("active");
  });
})

style.css

* {margin:0; padding:0;}

html {background:black;}

ul {list-style-type:none; -webkit-perspective: 1000px;}

li {position:relative;background:white; width:200px; height:200px; 
  float:left; margin:10px; border:1px solid #ccc;
-webkit-transform: translateZ(-400px); z-index:300; opacity:.4;
-webkit-transition-duration:400ms;
  text-align:center;line-height:200px; color:#ff0000; cursor:pointer; font-size:20px;
}


.active {position:relative; background:red; -webkit-transform: translateZ(0); z-index:400; opacity:1}