CSS3 rotateY page thickness

by Deepak Kumar

HTML

<div class='container'>
    <div id='flip1'>
        <div id="thick-side"></div>
    </div>
</div>
<div class='container'>
    <div id='flip2'>
        <div id="thick-side"></div>
    </div>
</div>
<div class='container'>
    <div id='flip3'>
        
    </div>
</div>

CSS

.container {
    width :200px;
    height : 200px;
    background-color: yellowgreen;
    -webkit-perspective: 500px;
    margin-top: 50px;
    margin-left: 20px;
    display:inline-block;
}
#flip1 {
    background-color: green;
    width: 50%;
    height:100%;
    float:right;
    -webkit-transform-origin: 0% 50%;
    -webkit-transform: rotateY(deg);
    -webkit-transform-style: preserve-3d;
}

#flip2 {
    background-color: green;
    width: 50%;
    height:100%;
    float:right;
    -webkit-transform-origin: 0% 50%;
    -webkit-transform: rotateY(-55deg);
    -webkit-transform-style: preserve-3d;
}

#flip3 {
    background-color: green;
    width: 50%;
    height:100%;
    float:right;
    -webkit-transform-origin: 0% 50%;
    -webkit-transform: rotateY(-90deg);
    -webkit-transform-style: preserve-3d;
}

#thick-side {
    width: 5px;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb), color-stop(0.5, #ddd), color-stop(1, #bbb));
    float: right;
    -webkit-transform: rotateY(90deg);
    positon: absolute;
    left: 100%;
}