<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CoverFlow - CSS Only</title>
        <style>
            #container {
                margin: 50px 150px;
                -webkit-perspective: 600px;
                -webkit-transform-style: preserve-3d;
            }
            .item {
                background-repeat: no-repeat;
                display: inline-block;
                height: 240px;
                width: 160px;

                margin: auto -50px;
                transition: all 1s;
                -webkit-transform: rotateY(45deg);
            }
            .item:focus {
                margin: 0;
                -webkit-transform: rotateY(0deg) translateZ(100px);
            }
            .item:focus~.item {
                -webkit-transform: rotateY(-45deg);
            }
        </style>
    </head>
    <body>
        <div id="container">

        </div>
        <script>
            var items = "";
            for(var i = 1; i <= 16; i++) {
                items += "<a href='#' class='item' style='background-image:url(images/" + ((i <= 9 ? "0" : "") + i) + ".jpg)' tabindex='1'></a>"
            }
            document.getElementById("container").innerHTML = items;
        </script>
    </body>
</html>

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CoverFlow - CSS Only</title>
        <style>
            #container {
                margin: 50px 150px;
                -webkit-perspective: 600px;
                -webkit-transform-style: preserve-3d;
            }
            .item {
                background-repeat: no-repeat;
                display: inline-block;
                height: 240px;
                width: 160px;

                margin: auto -50px;
                transition: all 1s;
                -webkit-transform: rotateY(45deg);
            }
            .item:focus {
                margin: 0 20px;
                -webkit-transform: rotateY(0deg) translateZ(100px);
            }
            .item:focus~.item {
                -webkit-transform: rotateY(-45deg);
            }
        </style>
    </head>
    <body>
        <div id="container">

        </div>
        <script>
            var items = "";
            for(var i = 1; i <= 16; i++) {
                items += "<a href='#' class='item' style='background-image:url(images/" + ((i <= 9 ? "0" : "") + i) + ".jpg)' tabindex='1'></a>"
            }
            document.getElementById("container").innerHTML = items;
        </script>
    </body>
</html>

Add a little more separation.
Add a little more separation.
