CSS3 эффект изгиба

Question

Интересно, может ли кто-нибудь сказать мне, возможен ли эффект изгиба, показанный на рисунке ниже, с помощью css3.

Если это так, могу ли я дать несколько советов о том, какчтобы достичь этого, пожалуйста?

Answer 1

Нечто подобное можно сделать:

http://jsfiddle.net/lollero/Bfwpz/

HTML:

<div id="boxWrap">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</div>

CSS:

#boxWrap { float: left;}

#boxWrap div {
    background: #e1e1e1;
    border: 1px solid #999999;
    width: 40px;
    height: 50px;
    float: left;
    margin: 10px;
    position: relative;
}

.box1 { top: 20px; }
.box2 { top: -20px; }
.box3 { top: -50px; }
.box4 { top: -20px; }
.box5 { top: 20px; }