3D旋转木马的影响 [英] 3d Carousel Effect

查看：242 发布时间：2015/11/28 11:45:50 html css3 plugins 3d carousel

本文介绍了3D旋转木马的影响的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想知道，如果在这个网站上看到有任何插件或开源的影像中可用的3D旋转木马

在大量的研究，我得到了一个软件WOW滑块pretty的适合这种效果.Still的问题是，任何答案将有助于

解决方案

在这里，在堆栈溢出我们喜欢旋转木马！

<一个href="http://$c$cpen.io/search/?depth=everything&limit=all&order=popularity&page=2&q=carousel&show_forks=false"相对=nofollow> 资源发现这里

有这么多的转盘我们可以从选择，他们都可以略有不同进行。一些使用JavaScript，其他人只是纯粹的CSS。而且因为有这么多的选择，在这里只是一个几个不同的样品。请注意，但是，我要离开它，你要问任何澄清的问题上它们是如何工作'如果需要的话，解释为每一个人将成为重复的，有一些细微的差别。有些还包括precompilers（即 LESS 或上海社会科学院为了正常工作）：

快速样品1

体{
背景：#eee;
字体家庭：宋体，黑体，无衬线;
保证金：50px的汽车;
填充：0;
}

H1 {
  字体家庭：比邻新星，Helvetica Neue字体，无衬线;
  字体大小：36px;
  文本对齐：中心;
}
H3 {
  字体家庭：比邻新星，Helvetica Neue字体，无衬线;
  字体大小：22px;
  字体样式：斜体;
  颜色：＃4e4e4e;
  文本对齐：中心;
  保证金底：-100px;
}

#wrapper中{
宽度：960px;
保证金：0汽车;
}

#wrapper中{
  观点：2500;
-webkit-观点：2500;
宽度：800px;
保证金：200像素自动0汽车;
  透视产地：50％150像素;
-webkit-透视产地：50％150像素;
  过渡：角度来看，1秒;
  -o过渡：-o-的角度来看，1秒;
  -moz-转变：-moz-的角度来看，1秒;
-webkit-转变：-webkit-的角度来看，1秒;
}

#image：悬停{
  动画播放状态：暂停;
  -o动画播放状态：已暂停;
  -moz-动画播放状态：暂停;
-webkit-动画播放状态：暂停;
}


@ -webkit-关键帧旋转{
	从 {
    变换：rotateY（0）;
    -o-变换：rotateY（0）;
    -ms变换：rotateY（0）;
    -moz-变换：rotateY（0）;
-webkit-变换：rotateY（0）;
}
	至 {
    变换：rotateY（-360deg）;
    -o变换：rotateY（-360deg）;
    -ms变换：rotateY（-360deg）;
    -moz-变换：rotateY（-360deg）;
-webkit-变换：rotateY（-360deg）;
}
}

＃图像 {
保证金：0汽车;
高度：300像素;
宽度：400像素;
  变换式：preserve-3D;
-webkit-变换式：preserve-3D;
  动画：旋24S无限线性的;
  -moz-动画：旋24S无限线性的;
  -o动画：旋24S无限线性的;
-webkit-动画：旋24S无限线性的;
}

。图像 {
位置：绝对的;
高度：300像素;
宽度：400像素;
  边界半径：25像素;
背景颜色：RGBA（0,0,0,0.6）;
文本对齐：中心;
字体大小：20em;
颜色：#FFF;
}

#image＆GT; .i1 {
  变换：translateZ（485px）;
  -moz-变换：translateZ（485px）;
  -o变换：translateZ（485px）;
  -ms变换：translateZ（485px）;
  -webkit-变换：translateZ（485px）;
}
#image＆GT; .i2 {
  变换：rotateY（45deg）translateZ（485px）;
  -moz-变换：rotateY（45deg）translateZ（485px）;
  -o变换：rotateY（45deg）translateZ（485px）;
  -ms变换：rotateY（45deg）translateZ（485px）;
  -webkit-变换：rotateY（45deg）translateZ（485px）;
}
#image＆GT; .i3 {
  变换：rotateY（90度）translateZ（485px）;
  -moz-变换：rotateY（90度）translateZ（485px）;
  -o变换：rotateY（90度）translateZ（485px）;
  -ms变换：rotateY（90度）translateZ（485px）;
  -webkit-变换：rotateY（90度）translateZ（485px）;
}
#image＆GT; .i4 {
  变换：rotateY（135deg）translateZ（485px）;
  -moz-变换：rotateY（135deg）translateZ（485px）;
  -o变换：rotateY（135deg）translateZ（485px）;
  -ms变换：rotateY（135deg）translateZ（485px）;
  -webkit-变换：rotateY（135deg）translateZ（485px）;
}
#image＆GT; .i5 {
  变换：rotateY（180deg）translateZ（485px）;
  -moz-变换：rotateY（180deg）translateZ（485px）;
  -o变换：rotateY（180deg）translateZ（485px）;
  -ms变换：rotateY（180deg）translateZ（485px）;
  -webkit-变换：rotateY（180deg）translateZ（485px）;
}
#image＆GT; .i6 {
  变换：rotateY（225deg）translateZ（485px）;
  -moz-变换：rotateY（225deg）translateZ（485px）;
  -o变换：rotateY（225deg）translateZ（485px）;
  -ms变换：rotateY（225deg）translateZ（485px）;
  -webkit-变换：rotateY（225deg）translateZ（485px）;
}
#image＆GT; .i7 {
  变换：rotateY（270deg）translateZ（485px）;
  -moz-变换：rotateY（270deg）translateZ（485px）;
  -o变换：rotateY（270deg）translateZ（485px）;
  -ms变换：rotateY（270deg）translateZ（485px）;
  -webkit-变换：rotateY（270deg）translateZ（485px）;
}
#image＆GT; .i8 {
  变换：rotateY（315deg）translateZ（485px）;
  -moz-变换：rotateY（315deg）translateZ（485px）;
  -o变换：rotateY（315deg）translateZ（485px）;
  -ms变换：rotateY（315deg）translateZ（485px）;
  -webkit-变换：rotateY（315deg）translateZ（485px）;
}

IMG {
  边界半径：25像素;

＆LT;身体GT;
  ＆LT; H1＆gt;查看在Chrome或Safari＆LT; / H1＆GT;
  ＆LT; H3＆GT;（悬停在暂停）LT; / H3＆GT;
＆LT; DIV ID =包装＆GT;
＆LT; DIV ID =形象＆GT;
＆LT; DIV CLASS =图像I1＆GT;＆LT; IMG SRC =https://dl.dropbox.com/u/80409395/$c$cpen/Noe-in-leaves.jpg＆GT;＆LT; / DIV＆GT ;
＆LT; DIV CLASS =图像I2＆GT;＆LT; IMG SRC =https://dl.dropbox.com/u/80409395/$c$cpen/Nat-sitting.jpg＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =形象I3＆GT;＆LT; IMG SRC =https://dl.dropbox.com/u/80409395/$c$cpen/Nat-noodles.jpg＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =形象I4＆GT;＆LT; IMG SRC =https://dl.dropbox.com/u/80409395/$c$cpen/Charlie-smiling.jpg＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =图像I＆GT;＆LT; IMG SRC =https://dl.dropbox.com/u/80409395/$c$cpen/Girls-in-leaves.jpg＆GT;＆LT; / DIV＆GT ;
＆LT; DIV CLASS =形象I6＆GT;＆LT; IMG SRC =https://dl.dropbox.com/u/80409395/$c$cpen/Natalie-smiling.jpg＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =形象I7＆GT;＆LT; IMG SRC =https://dl.dropbox.com/u/80409395/$c$cpen/Charlie-sleeping.jpg＆GT;＆LT; / DIV＆GT;
＆LT; DIV CLASS =形象I8＆GT;＆LT; IMG SRC =https://dl.dropbox.com/u/80409395/$c$cpen/Sledding.jpg＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;

快速样品2

 / *创建一个数组来保存不同的图像位置* /
变种itemPositions = [];
。VAR numberOfItems = $（'＃卷轴.item'）的长度;

/ *为每一个数组元素的CSS类基于其初始位置* /
功能assignPositions（）{
  对于（VAR I = 0; I＆LT; numberOfItems;我++）{
    如果（ⅰ=== 0）{
      itemPositions [我] ='左隐藏;
    }否则，如果（我=== 1）{
      itemPositions [我] ='左';
    }否则，如果（我=== 2）{
      itemPositions [I] ='中间';
    }否则，如果（我=== 3）{
      itemPositions [我] =正确的;
    } 其他 {
      itemPositions [我] ='右隐藏;
    }
  }
  / *每个类添加到相应的元素* /
  $（'＃卷轴.item'）。每个（函数（指数）{
    $（本）.addClass（itemPositions [指数]）;
  }）;
}

/ *要进行滚动，我们由一个地方转移阵列值，并重新应用类到图像* /
滚动功能（方向）{
  如果（方向==='preV'）{
    itemPositions.push（itemPositions.shift（））;
  }否则，如果（方向==='下一步'）{
    itemPositions.unshift（itemPositions.pop（））;
  }
  $（'＃卷轴.item'）。removeClass移除（左藏左中右右隐藏'）。每个（函数（指数）{
    $（本）.addClass（itemPositions [指数]）;
  }）;
}

/ *做这一切时的DOM准备* /
$（文件）。就绪（函数（）{

  assignPositions（）;
  无功自动滚屏= window.setInterval（滚动（下一步），4000）;

  / *悬停行为* /
  $（'＃卷轴）。悬停（函数（）{
    window.clearInterval（自动滚动）;
    $（'导航'）停止（真，真）.fadeIn（200）。
  }， 功能（） {
    自动滚屏= window.setInterval（滚动（下一步），4000）;
    $（'导航'）停止（真，真）.fadeOut（200）。
  }）;

  / *点击行为* /
  $（'。preV）。点击（函数（）{
    滚动（'preV'）;
  }）;
  $（'。接下来的'）。点击（函数（）{
    滚动（下一步）;
  }）;

}）;

 HTML，
体 {
  高度：100％;
  保证金：0;
}
体 {
  背景：-webkit-线性渐变（顶部，＃4D4D4D 0，＃4D4D4D 180px，＃939393 x 400像素）;
}
。警告 {
  保证金：10px的汽车0;
  宽度：500px的;
  文本对齐：中心;
  字体大小：20像素;
}
#scroller {
  宽度：500px的;
  高度：200像素;
  保证金：0汽车;
  填充：50像素0;
  -webkit-观点：500px的;
  -moz-观点：500px的;
  -o视角：500px的;
}
#scroller .item {
  宽度：500px的;
  显示：块;
  位置：绝对的;
  边界半径：10px的;
  -webkit-箱反映：下面0px -webkit-梯度（线性，左上角，左下角，从（透明），颜色停（.85，透明），到（RGBA（255，255，255，0.15）） ）;
  -webkit-转变：所有的0.4秒轻松-IN-OUT;
  -moz-转变：所有的0.4秒轻松-IN-OUT;
  -o转变：所有的0.4秒轻松-IN-OUT;
  的z-index：0;
}
/ *由于插图阴影不会发挥好与图片，我们将创建一个伪元素，我们的形象造型适用于代替* /

#scroller .item：前{
  边界半径：10px的;
  宽度：500px的;
  显示：块;
  内容： '';
  位置：绝对的;
  宽度：100％;
  高度：100％;
  箱阴影：插图0 0 0 1像素RGBA（255，255，255，0.3），0 0 0 1像素RGBA（0，0，0，0.4）;
}
#scroller .item IMG {
  显示：块;
  边界半径：10px的;
}
#scroller。左{
  -webkit-变换：rotateY（25deg）translateX（-320px）skewY（-5deg）规模（0.4，0.6）;
  -moz-变换：rotateY（25deg）translateX（-320px）skewY（-5deg）规模（0.4，0.6）;
  -o变换：rotateY（25deg）translateX（-320px）skewY（-5deg）规模（0.4，0.6）;
}
#scroller .middle {
  的z-index：1;
  -webkit-变换：rotateY（0deg）translateX（0）规模（1）;
  -moz-变换：rotateY（0deg）translateX（0）规模（1）;
  -o-变换：rotateY（0deg）translateX（0）比例（1）;
}
#scroller .right {
  -webkit-变换：rotateY（-25deg）translateX（320PX）skewY（5deg）规模（0.4，0.6）;
  -moz-变换：rotateY（-25deg）translateX（320PX）skewY（5deg）规模（0.4，0.6）;
  -o变换：rotateY（-25deg）translateX（320PX）skewY（5deg）规模（0.4，0.6）;
}
#scroller。左隐藏{
  不透明度：0;
  的z-index：-1;
  -webkit-变换：rotateY（25deg）translateX（-430px）skewY（-5deg）规模（0.3，0.5）;
  -moz-变换：rotateY（25deg）translateX（-430px）skewY（-5deg）规模（0.3，0.5）;
  -o变换：rotateY（25deg）translateX（-430px）skewY（-5deg）规模（0.3，0.5）;
}
#scroller .right隐藏{
  不透明度：0;
  的z-index：-1;
  -webkit-变换：rotateY（-25deg）translateX（430px）skewY（5deg）规模（0.3，0.5）;
  -moz-变换：rotateY（-25deg）translateX（430px）skewY（5deg）规模（0.3，0.5）;
  -o变换：rotateY（-25deg）translateX（430px）skewY（5deg）规模（0.3，0.5）;
}
.nav {
  位置：绝对的;
  宽度：500px的;
  高度：30PX;
  保证金：170px 0 0;
  的z-index：2;
  显示：无;
}
。preV，
。下一个 {
  位置：绝对的;
  显示：块;
  高度：30PX;
  宽度：30PX;
  背景色：RGBA（0，0，0，0.85）;
  边界半径：15px的;
  颜色：＃E4E4E4;
  底部：15px的;
  左：15px的;
  文本对齐：中心;
  的line-height：26px;
  光标：指针;
  箱阴影：插图0 0 0 1像素RGBA（255，255，255，0.5），0 0 0 1像素RGBA（0，0，0，0.7）;
}
。下一个 {
  左：继承;
  右：15px的;
}
。preV：徘徊，
。接下来：悬停{
  箱阴影：插图0 0 0 2px的RGBA（255，255，255，0.5），0 0 0 1像素RGBA（0，0，0，0.7）;
}

＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js"></script>
＆LT; DIV ID =卷轴＆GT;
  ＆LT; DIV CLASS =导航＆GT;
    ＆其中;一类=$ P $光伏＆GT;＆安培; LAQUO;＆所述; / a取代;
    ＆其中;一类=下一个＆GT;＆安培; RAQUO;＆所述; / a取代;
  ＆LT; / DIV＆GT;
  ＆LT;一类=项的href =＃＆GT;
    ＆LT; IMG SRC =http://i.imgur.com/5Mk3EfW.jpg/＆GT;
  ＆所述; / a取代;
  ＆LT;一类=项的href =＃＆GT;
    ＆LT; IMG SRC =http://i.imgur.com/79aU67L.jpg/＆GT;
  ＆所述; / a取代;
  ＆LT;一类=项的href =＃＆GT;
    ＆LT; IMG SRC =http://i.imgur.com/x3wSoFU.jpg/＆GT;
  ＆所述; / a取代;
  ＆LT;一类=项的href =＃＆GT;
    ＆LT; IMG SRC =http://i.imgur.com/27fTqbA.jpg/＆GT;
  ＆所述; / a取代;
  ＆LT;一类=项的href =＃＆GT;
    ＆LT; IMG SRC =http://i.imgur.com/RjdFV6n.jpg/＆GT;
  ＆所述; / a取代;
  ＆LT;一类=项的href =＃＆GT;
    ＆LT; IMG SRC =http://i.imgur.com/6W8JOza.jpg/＆GT;
  ＆所述; / a取代;
  ＆LT;一类=项的href =＃＆GT;
    ＆LT; IMG SRC =http://i.imgur.com/rwLY1JH.jpg/＆GT;
  ＆所述; / a取代;
＆LT; / DIV＆GT;

快速样品3

 $（函数（）{
  $（'图'）。在（'点击'，函数（）{
    。VAR NX = $（本）。接下来（）数据（'编号'）-1;
    如果（NX℃，）{为nx = 0;}
    VAR增量= -360 / 9 * NX;
   
    
    $（本）.parent（）的CSS（改造，translateZ（-288px）rotateY（+三角+DEG））。

  }）;
}）

 .container {
  宽度：210px;
  高度：140px;
  位置：亲属;
  观点：1000px;
  保证金：50px的汽车;
  边界：1px的固体#bbb;
}

#carousel {
  宽度：100％;
  高度：100％;
  位置：绝对的;
  变换式：preserve-3D;
  变换：translateZ（-288px）;
  过渡：全1易用性的;
}

图{保证金：0;}
#carousel图{
  显示：块;
  位置：绝对的;
  宽度：186px;
  高度：116px;
  左：10px的;
  顶：10px的;
  边界：2px的纯黑色;
}

/ * 40deg =九分之三百六十零* /
#carousel图：第n个孩子（1）{变换：rotateY（0deg）translateZ（288px）; }
#carousel图：第n个孩子（2）{变换：rotateY（40deg）translateZ（288px）; }
#carousel图：第n个孩子（3）{变换：rotateY（80度）translateZ（288px）; }
#carousel图：第n个孩子（4）{变换：rotateY（120deg）translateZ（288px）; }
#carousel图：第n个孩子（5）{变换：rotateY（160deg）translateZ（288px）; }
#carousel图：第n个孩子（6）{变换：rotateY（200deg）translateZ（288px）; }
#carousel图：第n个孩子（7）{变换：rotateY（240deg）translateZ（288px）; }
#carousel图：第n个孩子（8）{变换：rotateY（280deg）translateZ（288px）; }
#carousel图：第n个孩子（9）{变换：rotateY（320deg）translateZ（288px）; }

。活性{
  变换：translateZ（-288px）rotateY（-160deg）;
}

@keyframes旋{
从{变换：rotateY（0）; }
到{转换：rotateY（360deg）; }
}

#carousel {
动画：旋10S无限线性的;
}

＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js"></script>
＆lt;节类=容器＆GT;
  ＆LT; DIV ID =旋转木马＆GT;
    ＆其中;图数据号码=1→1＆其中; /数字＆GT;
    ＆其中;图数据号码=2→2＆其中; /数字＆GT;
    ＆其中;图数据数=3→3＆所述; /数字＆GT;
    ＆其中;图数据数=4＆GT; 4℃/数字＆GT;
    ＆其中;图数据数=10＆GT; 5℃/数字＆GT;
    ＆其中;图数据数=6→6＆所述; /数字＆GT;
    ＆其中;图数据数=7大于7＆所述; /数字＆GT;
    ＆其中;图数据数=8→8＆所述; /数字＆GT;
    ＆LT;图形数据数=9＆GT; 9＆LT; /图＆GT;
  ＆LT; / DIV＆GT;
＆LT; /节＆gt;

快速样品4：最佳IMO

身体GT; DIV {
宽度：500px的;
保证金：50px的汽车;
文本对齐：中心;
}

	数字 {
保证金：0;
}

	。容器 {
宽度：500px的;
高度：300像素;
文本对齐：左;
保证金：60PX汽车;
-webkit-观点：1000px;
-webkit-透视产地：50％-25％;
}

.carousel {
-webkit-变换式：preserve-3D;
-webkit-变换：translateZ（-540px）;
位置：亲属;
保证金：0;
宽度：500px的;
高度：300像素;
-webkit-转变：1秒;
}

.carousel IMG {
位置：绝对的;
边界：15px的固体RGBA（0，0，0，0.8）;
不透明度：.5;
-webkit-转变：1秒;
        宽度：500px的;
        高度：300像素;
        背景：#ccc;
}


.carousel IMG：第n个孩子（1）{-webkit-变换：translateZ（540px）规模（0.8）; }
.carousel IMG：第n个孩子（2）{-webkit-变换：rotateY（45deg）translateZ（540px）规模（0.8）; }
.carousel IMG：第n个孩子（3）{-webkit-变换：rotateY（90度）translateZ（540px）规模（0.8）; }
.carousel IMG：第n个孩子（4）{-webkit-变换：rotateY（135deg）translateZ（540px）规模（0.8）; }
.carousel IMG：第n个孩子（5）{-webkit-变换：rotateY（180deg）translateZ（540px）规模（0.8）; }
.carousel IMG：第n个孩子（6）{-webkit-变换：rotateY（225deg）translateZ（540px）规模（0.8）; }
.carousel IMG：第n个孩子（7）{-webkit-变换：rotateY（270deg）translateZ（540px）规模（0.8）; }
.carousel IMG：第n个孩子（8）{-webkit-变换：rotateY（315deg）translateZ（540px）规模（0.8）; }

	标签 {
光标：指针;
背景：#eee;
显示：inline-block的;
边界半径：50％;
宽度：30PX;
填充顶：7px的;
高度：23px;
字体：.9em宋体;
}

标签：悬停{
背景：#ddd;
}

输入{
位置：绝对的;
左：-9999px;
}

输入：检查+标签{
字体重量：大胆的;
背景：#ddd;
}

输入[值=1]：选中〜.container .carousel {-webkit-变换：translateZ（-540px）; }
输入[值=2]：选中〜.container .carousel {-webkit-变换：translateZ（-540px）rotateY（-45deg）; }
输入[值=3]：选中〜.container .carousel {-webkit-变换：translateZ（-540px）rotateY（-90deg）; }
输入[值=4]：选中〜.container .carousel {-webkit-变换：translateZ（-540px）rotateY（-135deg）; }
输入[值=5]：选中〜.container .carousel {-webkit-变换：translateZ（-540px）rotateY（-180deg）; }
输入[值=6]：选中〜.container .carousel {-webkit-变换：translateZ（-540px）rotateY（-225deg）; }
输入[值=7]：选中〜.container .carousel {-webkit-变换：translateZ（-540px）rotateY（-270deg）; }
输入[值=8]：选中〜.container .carousel {-webkit-变换：translateZ（-540px）rotateY（-315deg）; }

输入[值=1]：选中〜.container .carousel IMG：第n个孩子（1）{-webkit-变换：translateZ（540px），规模（1）;不透明度：1; }
输入[值=2]：选中〜.container .carousel IMG：第n个孩子（2）{-webkit-变换：rotateY（45deg）translateZ（540px），规模（1）;不透明度：1; }
输入[值=3]：选中〜.container .carousel IMG：第n个孩子（3）{-webkit-变换：rotateY（90度）translateZ（540px），规模（1）;不透明度：1; }
输入[值=4]：选中〜.container .carousel IMG：第n个孩子（4）{-webkit-变换：rotateY（135deg）translateZ（540px），规模（1）;不透明度：1; }
输入[值=5]：选中〜.container .carousel IMG：第n个孩子（5）{-webkit-变换：rotateY（180deg）translateZ（540px），规模（1）;不透明度：1; }
输入[值=6]：选中〜.container .carousel IMG：第n个孩子（6）{-webkit-变换：rotateY（225deg）translateZ（540px），规模（1）;不透明度：1; }
输入[值=7]：选中〜.container .carousel IMG：第n个孩子（7）{-webkit-变换：rotateY（270deg）translateZ（540px），规模（1）;不透明度：1; }
输入[值=8]：选中〜.container .carousel IMG：第n个孩子（8）{-webkit-变换：rotateY（315deg）translateZ（540px），规模（1）;不透明度：1; }

＆LT;身体GT;

＆LT; DIV＆GT;

＆LT;输入检查ID =一NAME =倍数类型=无线电值=1＆GT;
        ＆LT;标签=一＆GT; 1＆LT; /标签＆gt;

＆LT;输入ID =二NAME =倍数类型=无线电值=2＆GT;
        ＆LT;标签=两化→2＆LT; /标签＆gt;

        ＆LT;输入ID =三化NAME =倍数类型=电台的价值=3＆GT;
        ＆LT;标签=三化→3＆LT; /标签＆gt;

        ＆LT;输入ID =四NAME =倍数类型=无线电值=4＆GT;
        ＆LT;标签=四＆GT; 4℃/标签＆gt;

        ＆LT;输入ID =十一五NAME =倍数类型=无线电值=5＆GT;
        ＆LT;标签=五个一和GT; 5℃/标签＆gt;

        ＆LT;输入ID =六个一NAME =倍数类型=无线电值=6＆GT;
        ＆LT;标签=六＆GT; 6≤/标签＆gt;

        ＆LT;输入ID =七NAME =倍数类型=无线电值=7＆GT;
        ＆LT;标签=七＆GT; 7＆LT; /标签＆gt;

        ＆LT;输入ID =八NAME =倍数类型=无线电值=8＆GT;
        ＆LT;标签=八＆GT; 8示/标签＆gt;

＆LT; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =旋转木马＆GT;
＆LT; IMG SRC =图像/ 1.JPGALT =风景1＆GT;
＆LT; IMG SRC =图像/ 2.JPGALT =风景2＆GT;
＆LT; IMG SRC =图像/ 3.JPGALT =风景3＆GT;
＆LT; IMG SRC =图像/ 4.JPGALT =横向4＆GT;
＆LT; IMG SRC =图像/ 5.JPGALT =风景5＆GT;
＆LT; IMG SRC =图像/ 6.JPGALT =山水6＆GT;
＆LT; IMG SRC =图像/ 7.JPGALT =风景7＆GT;
＆LT; IMG SRC =图像/ 8.JPGALT =山水8＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

＆LT; / DIV＆GT;

＆LT; /身体GT;

快速样品5

使用SCSS 的〜源

快速样品6

变种我的code =功能（）{

//定义变量
VAR myPad = scrawl.pad.mycanvas，
		这里，
详细信息=假，
		我的图片，
myPicPath，
MySprite的，
myspeed的= 0，
项目= [
'神仙'，'blackbutterfly'，'cagedparrot，卷尾'，'greenparrot，
宜必思，呆瓜，孔雀开屏，鹈鹕，pinkcockatoo，
燕尾蝶，天鹅，tabbycats，鳖，火鸡
]
为myGroup，
myReflections，
旋转木马，
selectImage，
unselectImage，
checkClick，
updateCarousel;

//设置背景色帆布
scrawl.cell [myPad.base] .SET（{
的backgroundColor：'黑'，
}）;

//导入影像到乱写库
scrawl.getImagesByClass（演示）;

//定义组
为myGroup = scrawl.newGroup（{
名称：为myGroup'，
顺序：2，
}）;
myReflections = scrawl.newGroup（{
名称：myReflections，
顺序：1，
}）;

//定义精灵 - 旋转木马
转盘= scrawl.makeEllipse（{
名称：旋转木马，
STARTX：375，
startY：200，
半径X：300，
半径Y：100，
方法：'无'，
}）;

//定义精灵 - 显示照片
对于（VAR I = 0，Z = items.length; I＆LT; Z;我++）{
scrawl.newPicture（{
名称：项目[I]，
组：为myGroup'，
来源：项目[I]，
宽度：150，
高度：100，
strokeStyle：'金'，
lineJoin：'圆'，
方法：fillDraw，
路径：旋转木马，
pathPlace：I / Z，
pathSpeedConstant：假的，
handleX：中心，
汉德利：101％，
			}）。克隆（{
//和他们的倒影
名称：项目[I] +'_ R'，
组：myReflections，
globalAlpha：0.32，
flipUpend：真正的，
}）;
}

//事件侦听器和相关功能
selectImage =功能（）{
myPic = myGroup.getSpriteAt（这里）;
如果（myPic）{
myPicPath = myPic.path;
细节= TRUE;
myPic.set（{
STARTX：375，
startY：187.5，
路径：假的，
规模：3.7，
订单：1000，
汉德利：中心，
}）;
scrawl.sprite [myPic.name +'_ R']集（{
可见性：假的，
}）;
scrawl.render（）;
}
};
unselectImage =功能（）{
如果（myPic）{
myPic.set（{
汉德利：101％，
路径：myPicPath，
}）;
scrawl.sprite [myPic.name +'_ R']集（{
可见性：真实，
}）;
}
详细信息= FALSE;
myPic = FALSE;
myPicPath = FALSE;
};
checkClick =功能（E）{
如果（E）{
e.stopPropagation（）;
即preventDefault（）;
}
（详情）？ unselectImage（）：selectImage（）;
};
scrawl.canvas.mycanvas.addEventListener（鼠标松开，checkClick，假）;

//动画功能
updateCarousel =功能（）{
如果（！详情）{
myspeed的=  - （（here.x  -  375）/ 170000）;
对于（VAR I = 0，Z = items.length; I＆LT; Z;我++）{
= MySprite的scrawl.sprite [项目[I]];
mySprite.set（{
规模：（mySprite.start.y / 250）+0.5，
顺序：mySprite.start.y，
deltaPathPlace：myspeed的，
}）;
= MySprite的scrawl.sprite [项目[I] +'_ R'];
mySprite.set（{
规模：（mySprite.start.y / 250）+0.5，
顺序：mySprite.start.y，
deltaPathPlace：myspeed的，
}）;
}
myGroup.updateStart（）;
myReflections.updateStart（）;
}
myReflections.sortSprites（）;
myGroup.sortSprites（）;
myPad.stampBackground（）;
对于（VAR I = 0，Z = items.length; I＆LT; Z;我++）{
scrawl.sprite [myReflections.sprites [I]标记（'clearWithBackground'）。
scrawl.sprite [myReflections.sprites [I]]邮票（）。
scrawl.sprite [myGroup.sprites [I]]邮票（）。
}
myPad.show（）;
};

转盘//初始显示 - 对于野生动物园
这里= {X：350，Y：187.5，活跃：真};
updateCarousel（）;
updateCarousel（）;

//动画对象
scrawl.newAnimation（{
FN：函数（）{
此处= myPad.getMouse（）;
如果（here.active）{
updateCarousel（）;
}
}，
}）;
};

scrawl.loadModules（{
路径：http://scrawl.rikweb.org.uk/js/，
模块：['形象'，'动漫'，'道'，'工厂']，
回调：函数（）{
在window.onload =功能（）{
scrawl.init（）;
我的code（）;
};
}，
}）;

 IMG {
位置：固定;
能见度：隐藏;
}

＆LT; H2＆GT; / H2＆gt;在选择项目＆lt 3D旋转木马的效果;
＆LT; P＆GT;将鼠标移到画布旋转的转盘。点击图片放大，或返回到转盘＆LT; / P＆GT;

＆LT;帆布ID =mycanvasWIDTH =750HEIGHT =375＆GT;＆LT; /帆布＆GT;

＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/angelfish.pngID =神仙鱼级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/blackbutterfly.pngID =blackbutterfly级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/cagedparrot.pngID =cagedparrot级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/capuchin.pngID =僧帽级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/greenparrot.pngID =greenparrot级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/ibis.pngID =宜必思级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/kookaburra.pngID =呆瓜级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/peacock.pngID =孔雀级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/pelican.pngID =鹈鹕级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/pinkcockatoo.pngID =pinkcockatoo级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/swallowtail.pngID =燕尾级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/swan.pngID =天鹅级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/tabbycats.pngID =tabbycats级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/terrapin.pngID =鳖级=演示/＆GT;
＆LT; IMG SRC =http://scrawl.rikweb.org.uk/img/carousel/turkey.pngID =火鸡级=演示/＆GT;

＆LT;脚本SRC =http://scrawl.rikweb.org.uk/js/scrawlCore-min.js＆GT;＆LT; / SCRIPT＆GT;

替代/教程

类似这可能是你要寻找的。
这里有一个稍微不那么令人振奋的例子，但没有在少一个很好的开始
这里的另一个很好的例子
和又一伟大的教程

I want to know if there are any plugin or open source available for 3D Carousel of images as seen in this website

Link

After lot of research I got one software WOW SLIDER Pretty Good for this kind of effects .Still the question is on , any answers will help

解决方案

Here at Stack Overflow we love Carousels!

Sources found here

There are so many carousels we can choose from and they can all be made slightly differently. Some use Javascript, others just pure css. And since there are so many to choose from, here's just a few different samples. Please note, however, I am leaving it up to you to ask any clarification questions on 'how they work' if need be, as explaining each and every one would become repetitive, with some minor differences. Some also include precompilers (i.e LESS or SASS in order to work correctly):

quick sample 1

body {
	background: #eee;
	font-family: arial, helvetica, sans-serif;
	margin: 50px auto;
	padding: 0;
}

h1 {
  font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;
  font-size: 36px;
  text-align: center;
}
h3 {
  font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;
  font-size: 22px;
  font-style: italic;
  color: #4e4e4e;
  text-align: center;
  margin-bottom: -100px;
}

#wrapper {
	width: 960px;
	margin: 0 auto;
}

#wrapper {
  perspective: 2500;
	-webkit-perspective: 2500;
	width: 800px;
	margin: 200px auto 0 auto;
  perspective-origin: 50% 150px;
	-webkit-perspective-origin: 50% 150px;
  transition: perspective, 1s;
  -o-transition: -o-perspective, 1s;
  -moz-transition: -moz-perspective, 1s;
	-webkit-transition: -webkit-perspective, 1s;
}

#image:hover {
  animation-play-state:paused;
  -o-animation-play-state:paused;
  -moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
}


@-webkit-keyframes spin {
	from {
    transform: rotateY(0);
    -o-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -moz-transform: rotateY(0);
		-webkit-transform: rotateY(0);
	}
	to {
    transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
		-webkit-transform: rotateY(-360deg);
	}
}

#image {
	margin: 0 auto;
	height: 300px;
	width: 400px;
  transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
  animation: spin 24s infinite linear;
  -moz-animation: spin 24s infinite linear;
  -o-animation: spin 24s infinite linear;
	-webkit-animation: spin 24s infinite linear;
}

.image {
	position: absolute;
	height: 300px;
	width: 400px;
  border-radius: 25px;
	background-color: rgba(0,0,0,0.6);
	text-align: center;
	font-size: 20em;
	color: #fff;
}

#image > .i1 {
  transform: translateZ(485px);
  -moz-transform: translateZ(485px);
  -o-transform: translateZ(485px);
  -ms-transform: translateZ(485px);
  -webkit-transform: translateZ(485px);
}
#image > .i2 {
  transform: rotateY(45deg) translateZ(485px);
  -moz-transform: rotateY(45deg) translateZ(485px);
  -o-transform: rotateY(45deg) translateZ(485px);
  -ms-transform: rotateY(45deg) translateZ(485px);
  -webkit-transform: rotateY(45deg) translateZ(485px);
}
#image > .i3 {
  transform: rotateY(90deg) translateZ(485px);
  -moz-transform: rotateY(90deg) translateZ(485px);
  -o-transform: rotateY(90deg) translateZ(485px);
  -ms-transform: rotateY(90deg) translateZ(485px);
  -webkit-transform: rotateY(90deg) translateZ(485px);
}
#image > .i4 {
  transform: rotateY(135deg) translateZ(485px);
  -moz-transform: rotateY(135deg) translateZ(485px);
  -o-transform: rotateY(135deg) translateZ(485px);
  -ms-transform: rotateY(135deg) translateZ(485px);
  -webkit-transform: rotateY(135deg) translateZ(485px);
}
#image > .i5 {
  transform: rotateY(180deg) translateZ(485px);
  -moz-transform: rotateY(180deg) translateZ(485px);
  -o-transform: rotateY(180deg) translateZ(485px);
  -ms-transform: rotateY(180deg) translateZ(485px);
  -webkit-transform: rotateY(180deg) translateZ(485px);
}
#image > .i6 {
  transform: rotateY(225deg) translateZ(485px);
  -moz-transform: rotateY(225deg) translateZ(485px);
  -o-transform: rotateY(225deg) translateZ(485px);
  -ms-transform: rotateY(225deg) translateZ(485px);
  -webkit-transform: rotateY(225deg) translateZ(485px);
}
#image > .i7 {
  transform: rotateY(270deg) translateZ(485px);
  -moz-transform: rotateY(270deg) translateZ(485px);
  -o-transform: rotateY(270deg) translateZ(485px);
  -ms-transform: rotateY(270deg) translateZ(485px);
  -webkit-transform: rotateY(270deg) translateZ(485px);
}
#image > .i8 {
  transform: rotateY(315deg) translateZ(485px);
  -moz-transform: rotateY(315deg) translateZ(485px);
  -o-transform: rotateY(315deg) translateZ(485px);
  -ms-transform: rotateY(315deg) translateZ(485px);
  -webkit-transform: rotateY(315deg) translateZ(485px);
}

img {
  border-radius: 25px;

<body>
  <h1>View in Chrome or Safari</h1>
  <h3>(hover over to pause)</h3>
	<div id="wrapper">
		<div id="image">
			<div class="image i1"><img src="https://dl.dropbox.com/u/80409395/Codepen/Noe-in-leaves.jpg"></div>
			<div class="image i2"><img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-sitting.jpg"></div>
			<div class="image i3"><img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-noodles.jpg"></div>
			<div class="image i4"><img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-smiling.jpg"></div>
			<div class="image i5"><img src="https://dl.dropbox.com/u/80409395/Codepen/Girls-in-leaves.jpg"></div>
			<div class="image i6"><img src="https://dl.dropbox.com/u/80409395/Codepen/Natalie-smiling.jpg"></div>
			<div class="image i7"><img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-sleeping.jpg"></div>
			<div class="image i8"><img src="https://dl.dropbox.com/u/80409395/Codepen/Sledding.jpg"></div>
		</div>
	</div>
</body>

quick sample 2

/* Create an array to hold the different image positions */
var itemPositions = [];
var numberOfItems = $('#scroller .item').length;

/* Assign each array element a CSS class based on its initial position */
function assignPositions() {
  for (var i = 0; i < numberOfItems; i++) {
    if (i === 0) {
      itemPositions[i] = 'left-hidden';
    } else if (i === 1) {
      itemPositions[i] = 'left';
    } else if (i === 2) {
      itemPositions[i] = 'middle';
    } else if (i === 3) {
      itemPositions[i] = 'right';
    } else {
      itemPositions[i] = 'right-hidden';
    }
  }
  /* Add each class to the corresponding element */
  $('#scroller .item').each(function(index) {
    $(this).addClass(itemPositions[index]);
  });
}

/* To scroll, we shift the array values by one place and reapply the classes to the images */
function scroll(direction) {
  if (direction === 'prev') {
    itemPositions.push(itemPositions.shift());
  } else if (direction === 'next') {
    itemPositions.unshift(itemPositions.pop());
  }
  $('#scroller .item').removeClass('left-hidden left middle right right-hidden').each(function(index) {
    $(this).addClass(itemPositions[index]);
  });
}

/* Do all this when the DOMs ready */
$(document).ready(function() {

  assignPositions();
  var autoScroll = window.setInterval("scroll('next')", 4000);

  /* Hover behaviours */
  $('#scroller').hover(function() {
    window.clearInterval(autoScroll);
    $('.nav').stop(true, true).fadeIn(200);
  }, function() {
    autoScroll = window.setInterval("scroll('next')", 4000);
    $('.nav').stop(true, true).fadeOut(200);
  });

  /* Click behaviours */
  $('.prev').click(function() {
    scroll('prev');
  });
  $('.next').click(function() {
    scroll('next');
  });

});

html,
body {
  height: 100%;
  margin: 0;
}
body {
  background: -webkit-linear-gradient(top, #4D4D4D 0, #4D4D4D 180px, #939393 400px);
}
.warning {
  margin: 10px auto 0;
  width: 500px;
  text-align: center;
  font-size: 20px;
}
#scroller {
  width: 500px;
  height: 200px;
  margin: 0 auto;
  padding: 50px 0;
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -o-perspective: 500px;
}
#scroller .item {
  width: 500px;
  display: block;
  position: absolute;
  border-radius: 10px;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.85, transparent), to(rgba(255, 255, 255, 0.15)));
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  z-index: 0;
}
/* Since inset shadows don't play nice with images, we'll create a pseudo element and apply our image styling to that instead */

#scroller .item:before {
  border-radius: 10px;
  width: 500px;
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
#scroller .item img {
  display: block;
  border-radius: 10px;
}
#scroller .left {
  -webkit-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
  -moz-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
  -o-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
}
#scroller .middle {
  z-index: 1;
  -webkit-transform: rotateY(0deg) translateX(0) scale(1);
  -moz-transform: rotateY(0deg) translateX(0) scale(1);
  -o-transform: rotateY(0deg) translateX(0) scale(1);
}
#scroller .right {
  -webkit-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
  -moz-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
  -o-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
}
#scroller .left-hidden {
  opacity: 0;
  z-index: -1;
  -webkit-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
  -moz-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
  -o-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
}
#scroller .right-hidden {
  opacity: 0;
  z-index: -1;
  -webkit-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -moz-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -o-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
}
.nav {
  position: absolute;
  width: 500px;
  height: 30px;
  margin: 170px 0 0;
  z-index: 2;
  display: none;
}
.prev,
.next {
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  background-color: rgba(0, 0, 0, 0.85);
  border-radius: 15px;
  color: #E4E4E4;
  bottom: 15px;
  left: 15px;
  text-align: center;
  line-height: 26px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.next {
  left: inherit;
  right: 15px;
}
.prev:hover,
.next:hover {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroller">
  <div class="nav">
    <a class="prev">&laquo;</a>
    <a class="next">&raquo;</a>
  </div>
  <a class="item" href="#">
    <img src="http://i.imgur.com/5Mk3EfW.jpg" />
  </a>
  <a class="item" href="#">
    <img src="http://i.imgur.com/79aU67L.jpg" />
  </a>
  <a class="item" href="#">
    <img src="http://i.imgur.com/x3wSoFU.jpg" />
  </a>
  <a class="item" href="#">
    <img src="http://i.imgur.com/27fTqbA.jpg" />
  </a>
  <a class="item" href="#">
    <img src="http://i.imgur.com/RjdFV6n.jpg" />
  </a>
  <a class="item" href="#">
    <img src="http://i.imgur.com/6W8JOza.jpg" />
  </a>
  <a class="item" href="#">
    <img src="http://i.imgur.com/rwLY1JH.jpg" />
  </a>
</div>

quick sample 3

$(function(){
  $('figure').on('click', function(){
    var nx = $(this).next().data('number') -1;
    if(nx<0){nx =0;}
    var delta =  -360 /9 * nx; 
   
    
    $(this).parent().css("transform", "translateZ( -288px ) rotateY(" + delta + "deg )");

  });
})

.container {
  width: 210px;
  height: 140px;
  position: relative;
  perspective: 1000px;
  margin: 50px auto;
  border: 1px solid #bbb;
}

#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ(-288px);
  transition: all 1s ease-in;
}

figure{margin: 0;}
#carousel figure {
  display: block;
  position: absolute;
  width: 186px;
  height: 116px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
}

/* 40deg = 360/9 */
#carousel figure:nth-child(1) { transform: rotateY(   0deg ) translateZ( 288px ); }
#carousel figure:nth-child(2) { transform: rotateY(  40deg ) translateZ( 288px ); }
#carousel figure:nth-child(3) { transform: rotateY(  80deg ) translateZ( 288px ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); }

.active{
  transform: translateZ( -288px ) rotateY( -160deg );
}

@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
}

#carousel {
	animation: spin 10s infinite linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
  <div id="carousel">
    <figure data-number="1">1</figure>
    <figure data-number="2">2</figure>
    <figure data-number="3">3</figure>
    <figure data-number="4">4</figure>
    <figure data-number="5">5</figure>
    <figure data-number="6">6</figure>
    <figure data-number="7">7</figure>
    <figure data-number="8">8</figure>
    <figure data-number="9">9</figure>
  </div>
</section>

quick sample 4: Best IMO

body > div {
		width: 500px;
		margin: 50px auto;
		text-align: center;
	}

	figure {
		margin: 0;
	}

	.container {
		width: 500px;
		height: 300px;
		text-align: left;
		margin: 60px auto;
		-webkit-perspective: 1000px;
		-webkit-perspective-origin: 50% -25%;
	}

		.carousel {
			-webkit-transform-style: preserve-3d;
			-webkit-transform: translateZ(-540px);
			position: relative;
			margin: 0;
			width: 500px;
			height: 300px;
			-webkit-transition: 1s;
		}

			.carousel img {
				position: absolute;
				border: 15px solid rgba(0, 0, 0, .8);
				opacity: .5;
				-webkit-transition: 1s;
        width: 500px;
        height: 300px;
        background:#ccc;
			}

				
				.carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(.8); }
				.carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(.8); }
				.carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(.8); }
				.carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(.8); }
				.carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(.8); }
				.carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(.8); }
				.carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(.8); }
				.carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(.8); }

	label {
		cursor: pointer;
		background: #eee;
		display: inline-block;
		border-radius: 50%;
		width: 30px;
		padding-top: 7px;
		height: 23px;
		font: .9em Arial;
	}

	label:hover {
		background: #ddd;
	}

	input {
		position: absolute;
		left: -9999px;
	}

	input:checked + label {
		font-weight: bold;
		background: #ddd;
	}

		input[value="1"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px); }
		input[value="2"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-45deg); }
		input[value="3"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-90deg); }
		input[value="4"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-135deg); }
		input[value="5"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-180deg); }
		input[value="6"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-225deg); }
		input[value="7"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-270deg); }
		input[value="8"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-315deg); }

		input[value="1"]:checked ~ .container .carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }
		input[value="2"]:checked ~ .container .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(1); opacity: 1; }
		input[value="3"]:checked ~ .container .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(1); opacity: 1; }
		input[value="4"]:checked ~ .container .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(1); opacity: 1; }
		input[value="5"]:checked ~ .container .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(1); opacity: 1; }
		input[value="6"]:checked ~ .container .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(1); opacity: 1; }
		input[value="7"]:checked ~ .container .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(1); opacity: 1; }
		input[value="8"]:checked ~ .container .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(1); opacity: 1; }

<body>

	<div>

		<input checked id="one" name="multiples" type="radio" value="1">
        <label for="one">1</label>

		<input id="two" name="multiples" type="radio" value="2">
        <label for="two">2</label>

        <input id="three" name="multiples" type="radio" value="3">
        <label for="three">3</label>

        <input id="four" name="multiples" type="radio" value="4">
        <label for="four">4</label>

        <input id="five" name="multiples" type="radio" value="5">
        <label for="five">5</label>

        <input id="six" name="multiples" type="radio" value="6">
        <label for="six">6</label>

        <input id="seven" name="multiples" type="radio" value="7">
        <label for="seven">7</label>

        <input id="eight" name="multiples" type="radio" value="8">
        <label for="eight">8</label>

		<div class="container">
			<div class="carousel">
				<img src="images/1.jpg" alt="Landscape 1">
				<img src="images/2.jpg" alt="Landscape 2">
				<img src="images/3.jpg" alt="Landscape 3">
				<img src="images/4.jpg" alt="Landscape 4">
				<img src="images/5.jpg" alt="Landscape 5">
				<img src="images/6.jpg" alt="Landscape 6">
				<img src="images/7.jpg" alt="Landscape 7">
				<img src="images/8.jpg" alt="Landscape 8">
			</div>
		</div>

	</div>

</body>

quick sample 5

Uses SCSS ~source

quick sample 6

var mycode = function(){
		
	//define variables
	var myPad = scrawl.pad.mycanvas, 
		here,
		details = false,
		myPic, 
		myPicPath, 
		mySprite, 
		mySpeed = 0,
		items = [
			'angelfish', 'blackbutterfly', 'cagedparrot', 'capuchin', 'greenparrot', 
			'ibis', 'kookaburra', 'peacock', 'pelican', 'pinkcockatoo', 
			'swallowtail', 'swan', 'tabbycats', 'terrapin', 'turkey'
			],
		myGroup,
		myReflections,
		carousel,
		selectImage,
		unselectImage,
		checkClick,
		updateCarousel;
	
	//set background color for canvas
	scrawl.cell[myPad.base].set({
		backgroundColor: 'black',
		});

	//import images into scrawl library
	scrawl.getImagesByClass('demo');

	//define groups
	myGroup = scrawl.newGroup({
		name:	'myGroup',
		order:	2,
		});
	myReflections = scrawl.newGroup({
		name:	'myReflections',
		order:	1,
		});
		
	//define sprites - carousel
	carousel = scrawl.makeEllipse({
		name: 		'carousel',
		startX:		375,
		startY:		200,
		radiusX:	300,
		radiusY:	100,
		method:		'none',
		});
		
	//define sprites - display photos
	for(var i = 0, z = items.length; i < z; i++){
		scrawl.newPicture({
			name:				items[i],
			group:				'myGroup',
			source:				items[i],
			width:				150,
			height:				100,
			strokeStyle:		'Gold',
			lineJoin:			'round',
			method:				'fillDraw',
			path:				'carousel',
			pathPlace:			i/z,
			pathSpeedConstant:	false,
			handleX:			'center',
			handleY:			'101%',
			}).clone({
			//and their reflections
			name:				items[i]+'_r',
			group:				'myReflections',
			globalAlpha:		0.32,
			flipUpend:			true,
			});
		}
		
	//event listener and associated functions
	selectImage = function(){
		myPic = myGroup.getSpriteAt(here);
		if(myPic){
			myPicPath = myPic.path;
			details = true;
			myPic.set({
				startX:		375,
				startY:		187.5,
				path:		false,
				scale:		3.7,
				order:		1000,
				handleY:	'center',
				});
			scrawl.sprite[myPic.name+'_r'].set({
				visibility:	false,
				});
			scrawl.render();
			}
		};
	unselectImage = function(){
		if(myPic){
			myPic.set({
				handleY:	'101%',
				path:		myPicPath,
				});
			scrawl.sprite[myPic.name+'_r'].set({
				visibility:	true,
				});
			}
		details = false;
		myPic = false;
		myPicPath = false;
		};
	checkClick = function(e){
		if(e){
			e.stopPropagation();
			e.preventDefault();
			}
		(details) ? unselectImage() : selectImage();
		};
	scrawl.canvas.mycanvas.addEventListener('mouseup', checkClick, false);
		
	//animation function
	updateCarousel = function(){
		if(!details){
			mySpeed = -((here.x - 375)/170000);
			for(var i = 0, z = items.length; i < z; i++){
				mySprite = scrawl.sprite[items[i]];
				mySprite.set({
					scale: (mySprite.start.y/250)+0.5,
					order: mySprite.start.y,
					deltaPathPlace: mySpeed,
					});
				mySprite = scrawl.sprite[items[i]+'_r'];
				mySprite.set({
					scale: (mySprite.start.y/250)+0.5,
					order: mySprite.start.y,
					deltaPathPlace: mySpeed,
					});
				}
			myGroup.updateStart();
			myReflections.updateStart();
			}
		myReflections.sortSprites();
		myGroup.sortSprites();
		myPad.stampBackground();
		for(var i = 0, z = items.length; i < z; i++){
			scrawl.sprite[myReflections.sprites[i]].stamp('clearWithBackground');
			scrawl.sprite[myReflections.sprites[i]].stamp();
			scrawl.sprite[myGroup.sprites[i]].stamp();
			}
		myPad.show();
		};

	//initial display of carousel - for safari
	here = {x: 350, y: 187.5, active: true};
	updateCarousel();
	updateCarousel();

	//animation object
	scrawl.newAnimation({
		fn: function(){
			here = myPad.getMouse();
			if(here.active){
				updateCarousel();
				}
			},
		});
	};
	
scrawl.loadModules({
	path: 'http://scrawl.rikweb.org.uk/js/',
	modules: ['images', 'animation', 'path', 'factories'],
	callback: function(){
		window.onload = function(){
			scrawl.init();
			mycode();
			};
		},
	});

img {
	position: fixed;
	visibility: hidden;
	}

<h2>3D Carousel effect with selectable items</h2>
<p>Move mouse over canvas to rotate the carousel. Click on an image to enlarge it, or to return to the carousel.</p>

<canvas id="mycanvas" width="750" height="375"></canvas>

<img src="http://scrawl.rikweb.org.uk/img/carousel/angelfish.png" id="angelfish" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/blackbutterfly.png" id="blackbutterfly" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/cagedparrot.png" id="cagedparrot" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/capuchin.png" id="capuchin" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/greenparrot.png" id="greenparrot" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/ibis.png" id="ibis" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/kookaburra.png" id="kookaburra" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/peacock.png" id="peacock" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/pelican.png" id="pelican" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/pinkcockatoo.png" id="pinkcockatoo" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/swallowtail.png" id="swallowtail" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/swan.png" id="swan" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/tabbycats.png" id="tabbycats" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/terrapin.png" id="terrapin" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/turkey.png" id="turkey" class="demo" />

<script src="http://scrawl.rikweb.org.uk/js/scrawlCore-min.js"></script>

Alternatives/Tutorials

something like this may be what you're looking for.
Here's a slightly less exciting example, but no-the-less a great start
here's another good example
And yet another great tutorial

这篇关于3D旋转木马的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

3D旋转木马的影响 [英] 3d Carousel Effect

问题描述

在这里，在堆栈溢出我们喜欢旋转木马！

替代/教程

Here at Stack Overflow we love Carousels!

Alternatives/Tutorials

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

3D旋转木马的影响 [英] 3d Carousel Effect

问题描述

在这里，在堆栈溢出我们喜欢旋转木马！

替代/教程

Here at Stack Overflow we love Carousels!

Alternatives/Tutorials

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭