一款3D立体式图片360度旋转轮回效果源码.zip资源-CSDN文库

共3个文件

js：2个

html：1个

版权申诉

前端代码

67 浏览量 2022-11-10 01:45:49 上传评论收藏 61KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

一款3D立体式图片360度旋转轮回效果源码.zip （3个子文件）

132677809006204178

index.html 4KB

libs.min.js 170KB

lanrenzhijia.js 3KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D立体式图片360度旋转轮回效果</title> <style> *{ margin:0; padding:0; list-style:none;} img{ border:0;} html, body {background:#1a948d;} body {width:100%;background-size:cover; height:100%;min-height:1000px; overflow:hidden;font-family: 'quicksandlight', Helvetica, Arial;color:#fff;text-shadow: -1px -1px 4px rgba(0, 0, 0, .35); filter: dropshadow(color=#000000, offx=1, offy=1);} header {margin-top:30px;position:absolute; z-index:5; width:420px;padding-top:10px;padding-bottom:10px;} .trans3d {-webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0);-moz-transform-style: preserve-3d;-moz-transform: translate3d(0, 0, 0); -ms-transform-style:preserve-3d;-ms-transform: translate3d(0, 0, 0);transform-style:preserve-3d; transform: translate3d(0, 0, 0);/*-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;*/} #contentContainer {position:absolute;margin-left:-500px;margin-top:-500px;left:50%;top:50%; width:1000px;height:1000px;} #carouselContainer {position:absolute;margin-left:-500px;margin-top:-500px;left:50%;top:50%;width:1000px;height:1000px;} .carouselItem {width:320px; height:130px;position:absolute; left:50%;top:50%;margin-left:-160px;margin-top:-90px;visibility:hidden;} .carouselItemInner {width:320px;height:130px;position:absolute; background-color:rgba(255, 255, 255, .75); border:10px solid rgba(255, 255, 255, .5);color:aqua;font-size:72px;left:50%;top:50%;margin-left:-160px;margin-top:-90px;text-align:center;padding-top:50px;} </style> </head> <body> <header> <h1>3D立体式图片360度旋转轮回效果</h1> <div id="fps">Framerate: 0/60 FPS</div> </header>  <div id="contentContainer" class="trans3d"> <section id="carouselContainer" class="trans3d"> <figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a1.jpg)">1</div></figure> <figure id="item2" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a2.jpg)">2</div></figure> <figure id="item3" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a3.jpg)">3</div></figure> <figure id="item4" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a4.jpg)">4</div></figure> <figure id="item5" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a5.jpg)">5</div></figure> <figure id="item6" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a6.jpg)">6</div></figure> <figure id="item7" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a7.jpg)">7</div></figure> <figure id="item8" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a1.jpg)">8</div></figure> <figure id="item9" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a2.jpg)">9</div></figure> <figure id="item10" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a3.jpg)">10</div></figure> <figure id="item11" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a4.jpg)">11</div></figure> <figure id="item12" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a5.jpg)">12</div></figure> </section> </div> <script src='js/libs.min.js'></script> <script src="js/lanrenzhijia.js"></script><br>  </body> </html>

评论收藏

内容反馈

版权申诉