基于jQuery3D旋转明星人物展示特效

分享一款基于jQuery 3D旋转明星人物展示特效。这是一款来自百度换肤活动的明星旋转展示效果。效果图如下：

在线预览 源码下载

实现的代码。

html代码：

<divclass="s-skin-wrap"data-d=""><divclass="s-skin-inner"><divclass="s-skin-content"><divclass="s-star-wrap"id="s-skin-tshow"><divclass="s-star-list"id="s-star-list"><ulstyle="padding: 0px; position: relative;"class="clearfix roundabout-holder"><lidata-scale="0.7509"style="position: absolute; left: -37px; top: 129px; z-index: 3; transform: scale(0.7509); opacity: 0.75;"class="s-star-item s-star-p1 roundabout-moveable-item"data-index="0"data-starid="1016"data-starname="林心如"><imgsrc="info/413.png"alt="林心如"><divclass="s-star-label clearfix"><spanclass="s-star-name"data-starid="1016"data-log="skinPReview"data-logparam="starId=1016">林心如</span><ahref="#"class="s-star-preview"data-starid="1016"data-log="skinPreview"data-logparam="starId=1016"onclick="return false;">换肤预览</a></div></li><lidata-scale="0.6463"style="position: absolute; left: 88px; top: 101px; z-index: 1; transform: scale(0.6463); opacity: 0.65;"class="s-star-item s-star-p2 roundabout-moveable-item"data-index="1"data-starid="1018"data-starname="郑爽"><imgsrc="info/416.png"alt="郑爽"><divclass="s-star-label clearfix"><spanclass="s-star-name"data-starid="1018"data-log="skinPreview"data-logparam="starId=1018">郑爽</span><ahref="#"class="s-star-preview"data-starid="1018"data-log="skinPreview"data-logparam="starId=1018"onclick="return false;">换肤预览</a></div></li><lidata-scale="0.6004"style="position: absolute; left: 294px; top: 89px; z-index: 1; transform: scale(0.6004); opacity: 0.6;"class="s-star-item s-star-p3 roundabout-moveable-item"data-index="2"data-starid="1020"data-starname="戚薇"><imgsrc="info/414.png"alt="戚薇"><divclass="s-star-label clearfix"><spanclass="s-star-name"data-starid="1020"data-log="skinPreview"data-logparam="starId=1020">戚薇</span><ahref="#"class="s-star-preview"data-starid="1020"data-log="skinPreview"data-logparam="starId=1020"onclick="return false;">换肤预览</a></div></li><lidata-scale="0.6308"style="position: absolute; left: 502px; top: 97px; z-index: 1; transform: scale(0.6308); opacity: 0.63;"class="s-star-item s-star-p4 roundabout-moveable-item"data-index="3"data-starid="1017"data-starname="佟丽娅"><imgsrc="info/417.png"alt="佟丽娅"><divclass="s-star-label clearfix"><spanclass="s-star-name"data-starid="1017"data-log="skinPreview"data-logparam="starId=1017">佟丽娅</span><ahref="#"class="s-star-preview"data-starid="1017"data-log="skinPreview"data-logparam="starId=1017"onclick="return false;">换肤预览</a></div></li><lidata-scale="0.7257"style="position: absolute; left: 631px; top: 122px; z-index: 2; transform: scale(0.7257); opacity: 0.73;"class="s-star-item s-star-p5 angelababy roundabout-moveable-item"data-index="4"data-starid="1012"data-starname="Angelababy"><imgsrc="info/410.png"alt="Angelababy"><divclass="s-star-label clearfix"><spanclass="s-star-name"data-starid="1012"data-log="skinPreview"data-logparam="starId=1012">Angelababy</span><ahref="#"class="s-star-preview"data-starid="1012"data-log="skinPreview"data-logparam="starId=1012"onclick="return false;">换肤预览</a></div></li><lidata-scale="0.8491"style="position: absolute; left: 634px; top: 155px; z-index: 3; transform: scale(0.8491); opacity: 0.85;"class="s-star-item s-star-p6 roundabout-moveable-item"data-index="5"data-starid="1019"data-starname="唐嫣"><imgsrc="info/413.png"alt="唐嫣"><divclass="s-star-label clearfix"><spanclass="s-star-name"data-starid="1019"data-log="skinPreview"data-logparam="starId=1019">唐嫣</span><ahref="#"class="s-star-preview"data-starid="1019"data-log="skinPreview"data-logparam="starId=1019"onclick="return false;">换肤预览</a></div></li><lidata-scale="0.9537"style="position: absolute; left: 508px; top: 182px; z-index: 5; transform: scale(0.9537); opacity: 0.95;"class="s-star-item s-star-p7 roundabout-moveable-item"data-index="6"data-starid="1011"data-starname="李冰冰"><imgsrc="info/416.png"alt="李冰冰"><divclass="s-star-label clearfix"><spanclass="s-star-name"data-starid="1011"data-log="skinPreview"data-logparam="starId=1011">李冰冰</span><ahref="#"class="s-star-preview"data-starid="1011"data-log="skinPreview"data-logparam="starId=1011"onclick="return false;">换肤预览</a></div></li><lidata-scale="0.9996"style="position: absolute; left: 302px; top: 194px; z-index: 5; transform: scale(0.9996); opacity: 1;"class="s-star-item s-star-p8 roundabout-moveable-item roundabout-in-focus"data-index="7"data-starid="1013"data-starname="高圆圆"><imgsrc="info/417.png"alt="高圆圆"><divclass="s-star-label clearfix"><spanclass="s-star-name"data-starid="1013"data-log="skinPreview"data-logparam="starId=1013">高圆圆</span><ahref="#"class="s-star-preview"data-starid="1013"data-log="skinPreview"data-logparam="starId=1013"onclick="return false;">换肤预览</a></div></li><lidata-scale="0.9692"style="position: absolute; left: 95px; top: 186px; z-index: 5; transform: scale(0.9692); opacity: 0.97;"class="s-star-item s-star-p9 roundabout-moveable-item"data-index="8"data-starid="1014"data-starname="孙俪"><imgsrc="info/410.png"alt="孙俪"><divclass="s-star-label clearfix"><spanclass="s-star-name"data-starid="1014"data-log="skinPreview"data-logparam="starId=1014">孙俪</span><ahref="#"class="s-star-preview"data-starid="1014"data-log="skinPreview"data-logparam="starId=1014"onclick="return false;">换肤预览</a></div></li><lidata-scale="0.8743"style="position: absolute; left: -35px; top: 161px; z-index: 4; transform: scale(0.8743); opacity: 0.87;"class="s-star-item s-star-p10 roundabout-moveable-item"data-index="9"data-starid="1015"data-starname="姚晨"><imgsrc="info/418.png"alt="姚晨"><divclass="s-star-label clearfix"><spanclass="s-star-name"data-starid="1015"data-log="skinPreview"data-logparam="starId=1015">姚晨</span><ahref="#"class="s-star-preview"data-starid="1015"data-log="skinPreview"data-logparam="starId=1015"onclick="return false;">换肤预览</a></div></li></ul></div></div></div></div><divid="rightArea"class="right-area"><divid="advertisement"class="ad-area"></div></div></div>

via：http://www.w2bc.com/article/53783