updated 2 months ago, created by André Lambert
This is a demo I made to test the webkit CSS 3D transform and animation features. I used as little as javascript as possible to fully test these new features. On an iPhone you can also interact with this widget by tapping and draging.
Besides the transform and animation features I used border-radius, box-shadow and opacity to realy let it stand out.
Note: this will only work on webkit browsers such as Safari and iPhone. Google Chrome is almost there.
1234567891011121314151617181920212223242526272829303132333435363738394041424344 | ....carousel .item1 div { background-image:url('1.jpg'); }.carousel .item2 div { background-image:url('2.jpg'); }.carousel .item3 div { background-image:url('3.jpg'); }.carousel .item4 div { background-image:url('4.jpg'); }.carousel .item5 div { background-image:url('5.jpg'); }.carousel .item6 div { background-image:url('6.jpg'); }.carousel .item7 div { background-image:url('7.jpg'); } .carousel .loc1 { -webkit-transform:rotateY(0deg);}.carousel .loc2 { -webkit-transform:rotateY(51deg); opacity:.9;}.carousel .loc3 { -webkit-transform:rotateY(103deg); opacity:.7;}.carousel .loc4 { -webkit-transform:rotateY(154deg); opacity:.5;}.carousel .loc5 { -webkit-transform:rotateY(206deg); opacity:.5;}.carousel .loc6 { -webkit-transform:rotateY(257deg); opacity:.7;}.carousel .loc7 { -webkit-transform:rotateY(309deg); opacity:.9;} .pos1-2 { -webkit-animation-name: 'pos1-2'; -webkit-animation-duration: 1s; -webkit-animation-timing-function: cubic-bezier(1,.1,.4,1.2);}... |
Look at the source code and css for more information.
The images used in this example came from Stock.XCHNG.