js插件3d图片轮播，可以控制图片数量的(只有四张图片)

JavaScript026

js插件3d图片轮播，可以控制图片数量的(只有四张图片),第1张

漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js，基于jQuery，插件采用CSS 3D

动画效果，支持事件Callback调用，支持参数自定义配置，如：

speed：600 切换速度、autoplay:true

是否自动播放，在浏览器兼容方面，需要浏览器支持CSS3变换变形属性，不支持的将看不到3D特效！

以下是代码：

<!DOCTYPE html>

<html>

<head>

<title>transform-style实现Div的3D旋转-柯乐义</title>

<style>

*{font-size: 24pxcolor: #00ff00padding:0margin:0}

#container {

position: relative

height: 300px

width: 300px

-webkit-perspective: 500

margin-top: 200px

margin-right: auto

margin-left: auto

}

#parent-keleyi-com {

margin: 10px

width: 280px

height: 280px

background-color: #666

opacity: 0.3

-webkit-transform-style: preserve-3d

-webkit-animation: spin 15s infinite linear

}

#parent-keleyi-com >div {

position: absolute

top: 40px

left: 40px

width: 280px

height: 200px

padding: 10px

-webkit-box-sizing: border-box

}

#parent-keleyi-com >:first-child {

background-color: #000

-webkit-transform: translateZ(-100px) rotateY(45deg)

}

#parent-keleyi-com >:last-child {

background-color: #333

-webkit-transform: translateZ(50px) rotateX(20deg)

-webkit-transform-origin: 50% top

}

/*执行Y轴旋转360度动画*/

@-webkit-keyframes spin {

from {-webkit-transform: rotateY(0)}

to {-webkit-transform: rotateY(360deg)}

}

</style>

</head>

<body>

<div>请使用支持CSS3的浏览器<a href="http://keleyi.com/a/bjad/s89uo4t1.htm" target="_blank">原文</a></div>

<div id="container">

<div id="parent-keleyi-com">

<div><a href="/">柯乐义</a></div>

<div><a href="/">keleyi.com</a></div>

</div>

</div>

</body>

</html>