3d 旋转木马效果 [英] 3d Carousel Effect
本文介绍了3d 旋转木马效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在 CSS3 中实现 3D 轮播效果?
解决方案
在 Stack Overflow，我们喜欢轮播！
<小时><小时>我们可以选择的旋转木马太多了，而且它们的制作方式都可能略有不同.有些使用 Javascript，有些只是纯 css.由于可供选择的种类太多，这里仅提供几个不同的示例.但是，请注意，如果需要，我将让您就它们如何工作"提出任何澄清问题，因为解释每个问题都会变得重复，但会有一些细微的差别.有些还包括预编译器(即 LESS 或 SASS 以便正常工作):
快速示例 1
body {背景:#eee;字体家族:arial、helvetica、sans-serif；边距:50px 自动；填充:0；}h1{font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;字体大小:36px；文本对齐:居中；}h3{font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;字体大小:22px；字体样式:斜体；颜色:#4e4e4e；文本对齐:居中；底边距:-100px；}#包装{宽度:960px；边距:0 自动；}#包装{视角:2500；-webkit-透视:2500；宽度:800px；边距:200px 自动 0 自动；透视原点:50% 150px；-webkit-perspective-origin: 50% 150px;过渡:透视，1s；-o-transition: -o-perspective, 1s;-moz-transition: -moz-perspective, 1s;-webkit-transition: -webkit-perspective, 1s;}#图像:悬停{动画播放状态:暂停；-o-animation-play-state:暂停；-moz-animation-play-state:暂停；-webkit-animation-play-state:paused;}@-webkit-keyframes 旋转 {从 {变换:旋转Y(0)；-o-变换:rotateY(0);-ms-transform:rotateY(0);-moz 变换:rotateY(0);-webkit-transform:rotateY(0);}到 {变换:旋转Y(-360度)；-o-变换:旋转Y(-360度)；-ms-transform:rotateY(-360deg);-moz-transform:rotateY(-360deg);-webkit-transform:rotateY(-360deg);}}#图片 {边距:0 自动；高度:300px；宽度:400px；变换风格:preserve-3d；-webkit-transform-style: 保留-3d；动画:旋转 24 秒无限线性；-moz-animation:旋转 24 秒无限线性；-o-animation:旋转 24s 无限线性；-webkit-animation:旋转 24 秒无限线性；}.图片 {位置:绝对；高度:300px；宽度:400px；边框半径:25px；背景颜色:RGBA(0,0,0,0.6)；文本对齐:居中；字体大小:20em；颜色:#fff;}#图像 >.i1 {变换:translateZ(485px)；-moz-transform: translateZ(485px);-o-transform: translateZ(485px);-ms-transform: translateZ(485px);-webkit-transform: translateZ(485px);}#图像 >.i2 {变换:rotateY(45deg) translateZ(485px);-moz-transform:rotateY(45deg) translateZ(485px);-o-变换:rotateY(45deg) translateZ(485px);-ms-transform:rotateY(45deg) translateZ(485px);-webkit-transform:rotateY(45deg) translateZ(485px);}#图像 >.i3 {变换:rotateY(90deg) translateZ(485px);-moz-transform:rotateY(90deg) translateZ(485px);-o-变换:rotateY(90deg) translateZ(485px);-ms-transform:rotateY(90deg) translateZ(485px);-webkit-transform:rotateY(90deg) translateZ(485px);}#图像 >.i4 {变换:rotateY(135deg) translateZ(485px);-moz-transform:rotateY(135deg) translateZ(485px);-o-变换:rotateY(135deg) translateZ(485px);-ms-transform:rotateY(135deg) translateZ(485px);-webkit-transform:rotateY(135deg) translateZ(485px);}#图像 >.i5 {变换:rotateY(180deg) translateZ(485px);-moz-transform:rotateY(180deg) translateZ(485px);-o-变换:rotateY(180deg) translateZ(485px);-ms-transform:rotateY(180deg) translateZ(485px);-webkit-transform:rotateY(180deg) translateZ(485px);}#图像 >.i6 {变换:rotateY(225deg) translateZ(485px);-moz-transform:rotateY(225deg) translateZ(485px);-o-变换:rotateY(225deg) translateZ(485px);-ms-transform:rotateY(225deg) translateZ(485px);-webkit-transform:rotateY(225deg) translateZ(485px);}#图像 >.i7 {变换:rotateY(270deg) translateZ(485px);-moz-transform:rotateY(270deg) translateZ(485px);-o-变换:rotateY(270deg) translateZ(485px);-ms-transform:rotateY(270deg) translateZ(485px);-webkit-transform:rotateY(270deg) translateZ(485px);}#图像 >.i8 {变换:rotateY(315deg) translateZ(485px);-moz-transform:rotateY(315deg) translateZ(485px);-o-变换:rotateY(315deg) translateZ(485px);-ms-transform:rotateY(315deg) translateZ(485px);-webkit-transform:rotateY(315deg) translateZ(485px);}图片{边框半径:25px;<h1>在 Chrome 或 Safari 中查看</h1><h3>(悬停以暂停)</h3><div id="包装器"><div id="图像"><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>快速示例 2
/* 创建一个数组来保存不同的图像位置 */var itemPositions = [];var numberOfItems = $('#scroller .item').length;/* 根据每个数组元素的初始位置为其分配一个 CSS 类 */函数assignPositions() {for (var i = 0; i html,身体 {高度:100%；边距:0；}身体 {背景:-webkit-linear-gradient(顶部，#4D4D4D 0，#4D4D4D 180px，#939393 400px)；}.警告 {边距:10px 自动 0；宽度:500px；文本对齐:居中；字体大小:20px；}#scroller {宽度:500px；高度:200px；边距:0 自动；填充:50px 0;-webkit-perspective: 500px;-moz-perspective: 500px;-o-透视:500px；}#scroller .item {宽度:500px；显示:块；位置:绝对；边框半径:10px；-webkit-box-reflect: 低于 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.85, transparent), to(rgba(255, 255, 255, 0.15)));-webkit-transition:所有 0.4 秒的缓入缓出；-moz-transition:所有 0.4 秒的缓入缓出；-o-transition:所有 0.4 秒的缓入缓出；z-索引:0；}/* 由于插入阴影不能很好地处理图像，我们将创建一个伪元素并将我们的图像样式应用到它 */#scroller .item:before {边框半径:10px；宽度:500px；显示:块；内容: '';位置:绝对；宽度:100%；高度:100%；box-shadow: 插入 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.4);}#scroller .item img {显示:块；边框半径: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-索引:1；-webkit-transform:rotateY(0deg) translateX(0) scale(1);-moz-transform:rotateY(0deg) translateX(0) scale(1);-o-变换: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 {不透明度:0；z-索引:-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 {不透明度:0；z-索引:-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 {位置:绝对；宽度:500px；高度:30px；边距:170px 0 0;z-索引:2；显示:无；}.prev,.下一个 {位置:绝对；显示:块；高度:30px；宽度:30px；背景颜色:rgba(0, 0, 0, 0.85);边框半径:15px；颜色:#E4E4E4；底部:15px；左:15px；文本对齐:居中；行高:26px；光标:指针；box-shadow: 插入 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);}.下一个 {左:继承；右:15px；}.prev:悬停,.next:悬停{box-shadow: 插入 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="滚动条"><div class="nav"><a class="prev">«</a><a class="next">»</a><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>
