See a fan website made a color video tutorial, nima need 10 oceans at this point, I am a little uncomfortable, so something maybe want money, I wipe, so carefree egg itchy, I myself to have a HTML
code is as follows:


<Div class="main" > <Div class="main1 >" </div> <Div class="main2" > </div> <Div class="main3 >" </div> <Div class="main4 >" </div> <Div class="main5 >" </div> <Div class="main6 >" </div> <Div class="main7 >" </div> <Div class="main8 >" </div> <Div class="main9 >" </div> <Div class="main10 >" </div> <Div class="main11 >" </div> <Div class="main12 >" </div> <Div class="main13 >" </div> <Div class="main14 >" </div> <Div class="main15 >" </div> <Div class="main16 >" </div> <Div class="main17 >" <Span> GaGa production </span> </div> <Span class="main18 >" </span> </div> CSS
code is as follows:


main {width: 800 px; Position: relative; Height: 500 px; Top: 50%; Left: 50%; Margin - top: 200 px; }. The main div {width: 80 px; Height: 400 px; Position: absolute; Top: 0; Left: 0; Border-radius: 10 px; Moz - transform - origin: 25 px, 360 px; The main1.}. {background: # DB3535; Moz - transform: the rotate (80 deg); Z - index: 1; Main2.}. {background: # F16729; Moz - transform: the rotate (70 deg); Z - index: 2; Main3.}. {background: # F89424; Moz - transform: the rotate (60 deg); Z - index: 3; Main4.}. {background: # FFCF13; Moz - transform: the rotate (to 50 deg); Z - index: 4; Main5.}. {background: # FFEA0D; Moz - transform: the rotate 40 deg (-); Z - index: 5; B11f main6.}. {background: # 87; Moz - transform: the rotate (- 30 deg); Z - index: 6; Main7.}. {background: # 008254; Moz - transform: the rotate (~ 20 deg); Z - index: 7; B6}. Main8 {background: # 3377; Moz - transform: the rotate (- 10 deg); Z - index: 8; Main9.}. {background: # 4 c549f; Moz - transform: the rotate (0 deg); Z - index: 9; Main10.}. {background: # 774395; Moz - transform: the rotate (10 deg); Z - index: 10; Main11.}. {background: # CA0C86; Moz - transform: the rotate (20 deg); Z - index: 11; Main12.}. {background: # FCF27E; Moz - transform: the rotate (30 deg); Z - index: 12; Main13.}. {background: # FFEA0D; Moz - transform: the rotate (40 deg); Z - index: 13; Main14.}. {background: # FFCF13; Moz - transform: the rotate (50 deg); Z - index: 14; Main15.}. {background: # F89424; Moz - transform: the rotate (60 deg); Z - index: 15; Main16.}. {background: # F16729; Moz - transform: the rotate (70 deg); Z - index: 16; Main17.}. {background: # DB3535; Moz - transform: the rotate (80 deg); Z - index: 17; - moz - text - transform: the rotate (80 deg); The text - align: center; The line - height: 400 px; Main18.}. {display: block; Position: absolute; Top: 355 px; Left: 0 px; Width: 20 px; Height: 20 px; Background: # CCC; Border-radius: 10 px; Z - index: 18; }. Main17 span {- moz - transform: the rotate (90 deg); Display: block; The font-family: "Microsoft jas black"; Color: # FFF; The font - size: 18 px; The font - weight: bold; Text - shadow: 0 px 1 0 # 000; } the effect as shown in figure   Notice: this example is record for itself, forget those Daniel not spray me!!!!!!!!!!! This only made the firefox browser compatibility, the other too lazy to do, only knew the principle


This concludes the body part