3-d Checker Board

by Richard Hunter

HTML

<div class='container'>
    <div class='foo'>
    <div class='blue'></div>
    <div class='pink'></div>
    <div class='blue'></div>
    <div class='pink'></div>
    <div class='blue'></div>
    <div class='pink'></div>
        <div class='blue'></div>
    <div class='pink'></div>
    <div class='blue'></div>
    <div class='pink'></div>
    <div class='blue'></div>
    <div class='pink'></div>
        <div class='blue'></div>
    <div class='pink'></div>
    <div class='blue'></div>
    <div class='pink'></div>
    <div class='blue'></div>
    <div class='pink'></div>
        <div class='blue'></div>
    <div class='pink'></div>
    <div class='blue'></div>
    <div class='pink'></div>
    <div class='blue'></div>
    <div class='pink'></div>
    </div>
    
</div>

SCSS

.container {
    $perspective : 104px;

    position : relative;
    margin : 100px;
    width : 550px;
    height : 300px;
    background : yellow;
    transform-style: preserve-3d;
    perspective : $perspective;
    perspective-origin : 50% 50%;
   
    overflow-x: hidden;
    overflow-y: auto;
    
    .foo {
         transform-style: preserve-3d;
        height : 800px;
    }
     .pink {
        float : left;
        width : 100px;
        height : 100px;
        background : pink;
       
        transform: translateZ(0) ;
      
    }   
    .blue {
        $translateZ : -24px;
        float : left;
        width : 100px;
        height : 100px;
        background : lightblue;
       
        transform: translateZ($translateZ) scale(2);
        
        
    
    }

    
}