js实现轮播图最简代码旋转三⾓形css_css实现三⾯⽴体旋转⽆限轮播图动画（代码
⽰例）
本篇⽂章给⼤家介绍css实现三⾯⽴体旋转⽆限轮播图动画（代码⽰例），有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对你们有所帮助。
在之前的⽂章⾥介绍横向播放的⽆限轮播图动画（如下图），本⽂我们将在之前的基础上进⾏修改，实现不⼀样的轮播图动画。
web前端学习：打造全⽹web前端全栈资料库（总⽬录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）z huanlan.zhihu
三⾯⽴体旋转的轮播图
通过⼀些⼩的改动，我们可以使⽤不同的多边形形状⽤于图像轮，以及更⼤的图像，从⽽产⽣不同的效果。在这种情况下，图像是两倍⼤并且放置在使⽤较少空间的三⾓形布置中。序列中仍然有⼋张相同的照⽚：
使⽤Firefox，你会看到动画也在运⾏。除了额外的JavaScript代码，并⽤-moz替换 -webkit，我们必须添加-moz-transform-style：preserve-3d; 到css的#rotator a⾥， 因为它没有被继承（从Firefox v12开始）。
这个例⼦略有变化，我们正在将照⽚从队列的前⾯移动到后⾯。在前⼀种情况下，我们将它们从队列的后⾯移动到前⾯。
为此，我们将把：
target.insertBefore(arr[arr.length-1], arr[0]);
变成：
target.appendChild(arr[0]);
下⾯放上完整代码：
html代码：
<div id="stage3">
<div id="rotator3" > <a href="1.jpg"><img src="1.jpg" height="180"></a>
<a href="2.jpg"><img src="2.jpg" height="180"></a>
<a href="3.jpg"><img src="3.jpg" height="180"></a>
<a href="4.jpg"><img src="4.jpg" height="180"></a>
<a href="5.jpg"><img src="5.jpg" height="180"></a>
<a href="6.jpg"><img src="6.jpg" height="180"></a>
<a href="7.jpg"><img src="7.jpg" height="180"></a>
<a href="8.jpg"><img src="8.jpg" height="180"></a>
</div>
</div>
css代码：
#stage3 {
margin: 2em auto 1em 50%;
height: 240px;
-webkit-perspective: 1200px;
-webkit-perspective-origin: 0 90px;
-moz-perspective: 1200px;
-moz-perspective-origin: 0 90px;
-ms-perspective: 1200px;
-ms-perspective-origin: 0 90px;
}
#rotator3 a {
position: absolute;
left: -151px;
-
moz-transform-style: preserve-3d;
}
#rotator3 a img {
padding: 10px;
border: 1px solid #ccc;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
#rotator3 a:nth-of-type(1) img {
-
webkit-transform: rotateX(-90deg) translateZ(100px);
-moz-transform: rotateX(-90deg) translateZ(100px);
-ms-transform: rotateX(-90deg) translateZ(100px);
}
#rotator3 a:nth-of-type(2) img {
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
}
#rotator3 a:nth-of-type(3) img {
-webkit-transform: rotateX(90deg) translateZ(100px);
-
moz-transform: rotateX(90deg) translateZ(100px);
-ms-transform: rotateX(90deg) translateZ(100px);
}
#rotator3 a:nth-of-type(n+4) { display: none; }
@-webkit-keyframes rotator3 {
from { -webkit-transform: rotateX(0deg);  }
to  { -webkit-transform: rotateX(90deg); }
}
@-moz-keyframes rotator3 {
from { -moz-transform: rotateX(0deg);  }
from { -moz-transform: rotateX(0deg);  }
to  { -moz-transform: rotateX(90deg); }
}
@-ms-keyframes rotator3 {
from { -ms-transform: rotateX(0deg);  }
to  { -ms-transform: rotateX(90deg); }
}
#rotator3 {
-webkit-transform-origin: 0 101px;
-webkit-transform-style: preserve-3d;
-webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-webkit-animation-duration: 2s;
-
webkit-animation-delay: 1s;
-moz-transform-origin: 0 101px;
-moz-transform-style: preserve-3d;
-moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-moz-animation-duration: 2s;
-moz-animation-delay: 1s;
-ms-transform-origin: 0 101px;
-ms-transform-style: preserve-3d;
-ms-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
-ms-animation-duration: 2s;
-ms-animation-delay: 1s;
}
#rotator3:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-ms-animation-play-state: paused;
}
js代码：
document.addEventListener("DOMContentLoaded", function() {
var rotateComplete = function(e) {
with(target.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "";
}
target.insertBefore(arr[arr.length - 1], arr[0]);
setTimeout(function(el) {
with(el.style) {
webkitAnimationName = MozAnimationName = msAnimationName = "rotator3"; }
}, 0, target);
};
var target = ElementById("rotator3");
var arr = ElementsByTagName("a");
target.addEventListener("webkitAnimationEnd", rotateComplete, false);
target.addEventListener("animationend", rotateComplete, false);
target.addEventListener("MSAnimationEnd", rotateComplete, false);
}, false);
总结：以上就是本篇⽂的全部内容，希望能对⼤家的学习有所帮助。
以上就是css实现三⾯⽴体旋转⽆限轮播图动画（代码⽰例）的详细内容。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。