1、新建html文档。
2、书写hmtl代码。<div id="main"> <article> <h2>Grow</h2> <ul class="grow"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li>Six</li> <li>Seven</li> <li>Eight</li> <li>Nine</li> <li>Ten</li> <li>Eleven</li> <li>Twelve</li> <li>Thirteen</li> <li>Fourteen</li> <li>Fifteen</li> <li>Sixteen</li> <li>Seventeen</li> <li>Eighteen</li> <li>Nineteen</li> <li>Twenty</li> <li>Twentyone</li> <li>Twentytwo</li> <li>Twentythree</li> <li>Twentyfour</li> <li>Twentyfive</li> <li>Twentysix</li> <li>Twentyseven</li> <li>Twentyeight</li> <li>Twentynine</li> <li>Thirty</li> <li>Thirtyone</li> <li>Thirtytwo</li> <li>Thirtythree</li> <li>Thirtyfour</li> <li>Thirtyfive</li> <li>Thirtysix</li> <li>Thirtyseven</li> <li>Thirtyeight</li> <li>Thirtynine</li> <li>Forty</li> <li>Fortyone</li> <li>Fortytwo</li> <li>Fortythree</li> <li>Fortyfour</li> <li>Fortyfive</li> <li>Fortysix</li> <li>Fortyseven</li> <li>Fortyeight</li> <li>Fortynine</li> <li>Fifty</li> <li>Fiftyone</li> <li>Fiftytwo</li> <li>Fiftythree</li> <li>Fiftyfour</li> <li>Fiftyfive</li> <li>Fiftysix</li> <li>Fiftyseven</li> <li>Fiftyeight</li> <li>Fiftynine</li> <li>Sixty</li> <li>Sixtyone</li> <li>Sixtytwo</li> <li>Sixtythree</li> <li>Sixtyfour</li> <li>Sixtyfive</li> <li>Sixtysix</li> <li>Sixtyseven</li> <li>Sixtyeight</li> <li>Sixtynine</li> <li>Seventy</li> <li>Seventyone</li> <li>Seventytwo</li> <li>Seventythree</li> <li>Seventyfour</li> <li>Seventyfive</li> <li>Seventysix</li> <li>Seventyseven</li> <li>Seventyeight</li> <li>Seventynine</li> <li>Eighty</li> <li>Eightyone</li> <li>Eightytwo</li> <li>Eightythree</li> <li>Eightyfour</li> <li>Eightyfive</li> <li>Eightysix</li> <li>Eightyseven</li> <li>Eightyeight</li> <li>Eightynine</li> <li>Ninety</li> <li>Ninetyone</li> <li>Ninetytwo</li> <li>Ninetythree</li> <li>Ninetyfour</li> <li>Ninetyfive</li> <li>Ninetysix</li> <li>Ninetyseven</li> <li>Ninetyeight</li> <li>Ninetynine</li> </ul> </article></div>
3、初始化css代码。<style>html, body { margin: 0px; padding: 0px; }body { background: #323232; font-family: 'Lato', Times, 'Times New Roman', serif; font-size: 16px; color: #eee; margin-bottom: 40px; line-height: 1; }a { color: cyan; }article { display: inline-block; margin: 20px; }h2 { font-size: 16px; margin-bottom: 20px; text-transform: uppercase; }small { opacity: 0.6; font-style: italic; font-size: 14px; margin-left: 5px; }ul { position: relative; width: 230px; height: 480px; margin: 0; padding: 0; overflow-x: hidden; overflow-y: scroll; list-style: none; -webkit-perspective: 400px; -moz-perspective: 400px; -ms-perspective: 400px; -o-perspective: 400px; perspective: 400px; }ul li { position: relative; padding: 16px; background: #eee; color: #252525; font-size: 18px; z-index: 2; -webkit-transform: translateZ(0px); -moz-transform: translateZ(0px); -ms-transform: translateZ(0px); -o-transform: translateZ(0px); transform: translateZ(0px); }ul li:nth-child(odd) { background: #fff; }</style>
4、书写css代码。.cards { -webkit-perspective: 300px; -moz-perspective: 300px; -ms-perspective: 300px; -o-perspective: 300px; perspective: 300px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; -o-perspective-origin: 50% 50%; perspective-origin: 50% 50%;} .cards li { -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; -ms-transition: all 600ms ease; -o-transition: all 600ms ease; transition: all 600ms ease; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .cards li.past { -webkit-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg ); -moz-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg ); -ms-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg ); -o-transform: translate3d( 0, -100px, -100px ) rotateX( -90deg ); transform: translate3d( 0, -100px, -100px ) rotateX( -90deg ); } .cards li.future { -webkit-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg ); -moz-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg ); -ms-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg ); -o-transform: translate3d( 0, 100px, -100px ) rotateX( 90deg ); transform: translate3d( 0, 100px, -100px ) rotateX( 90deg ); }
5、代码整体结构。
6、查看效果。
