先看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d变换</title>
<style>
#container {
perspective: 1600px;
position: relative;
width: 1000px;
height:800px;
border: 1px solid #f00;
margin: 30px auto;
}
#content,#content1{
transform-style: preserve-3d;
width: 200px;
height:100px;
position: absolute;
left:50%;
top: 50%;
margin: -50px 0 0 -100px;
}
#content img,#content1 img{
position: absolute;
transition: all 1s;
}
</style>
</head>
<body>
<div id="container">
<div id="content"><!--垂直旋转的容器-->
<img src="img/img1.jpg">
<img src="img/img2.jpg">
<img src="img/img3.jpg">
<img src="img/img4.jpg">
<img src="img/img5.jpg">
<img src="img/img6.jpg">
<img src="img/img7.jpg">
<img src="img/img8.jpg">
<img src="img/img9.jpg">
<img src="img/10.jpg"/>
<img src="img/11.jpg"/>
<img src="img/12.jpg"/>
<img src="img/13.jpg"/>
<img src="img/14.jpg"/>
</div>
<div id="content1"><!--水平旋转的容器-->
<img src="img/img1.jpg">
<img src="img/img2.jpg">
<img src="img/img3.jpg">
<img src="img/img4.jpg">
<img src="img/img5.jpg">
<img src="img/img6.jpg">
<img src="img/img7.jpg">
<img src="img/img8.jpg">
<img src="img/img9.jpg">
<img src="img/10.jpg"/>
<img src="img/11.jpg"/>
</div>
</div>
</body>
</html>
<noscript>您的浏览器未启用JavaScript或不支持JavaScript</noscript>
<script>
var container=document.getElementById('container');
var content=document.getElementById('content');//此容器将做垂直方向的旋转
var content1=document.getElementById('content1');//此容器将做水平方向的旋转
var imgs=content.getElementsByTagName('img');
var imgs1=content1.getElementsByTagName('img');
//首张图片旋转角度,和每张图片相隔的角度:
var firstdeg= 0,rotatedeg=360/imgs.length,rotatedeg1=360/imgs1.length;
var speed=0,speed1=0;
//主要的功能函数:
var transformStar=function (firstdeg,imgs,imgwidth,imgheight,imgmargin,vertical){
var l=imgs.length;
var direct=vertical ? "rotateX" : "rotateY";
var x=vertical ? imgheight : imgwidth;
var radius=x/(Math.tan(Math.PI/l)*2)+imgmargin+"px";//计算出图片距离旋转中心的垂直距离
for (var i= 0;i<l;i++){
imgs[i].style.width=imgwidth+"px";
imgs[i].style.height=imgheight+"px";
imgs[i].style['transform']=direct+'('+(i*(360/l)+firstdeg)+'deg'+')'+'translateZ('+radius+')';
imgs[i].style['-webkit-transform']=direct+'('+(i*(360/l)+firstdeg)+'deg'+')'+'translateZ('+radius+')';
imgs[i].style['-moz-transform']=direct+'('+(i*(360/l)+firstdeg)+'deg'+')'+'translateZ('+radius+')';
imgs[i].style['-o-transform']=direct+'('+(i*(360/l)+firstdeg)+'deg'+')'+'translateZ('+radius+')';
}
};
transformStar(firstdeg,imgs,180,140,50,true);//垂直旋转的容器的初始状态
transformStar(firstdeg,imgs1,180,140,80,false);//水平旋转的容器的初始状态
//添加定时器使自动旋转:
var timer;
function autoRotate(){
clearTimeout(timer);
speed+=rotatedeg;//使第一张图片的旋转角度每次加一个值(各个图片相隔的角度)
speed1+=rotatedeg1;
transformStar(speed,imgs,180,140,50,true);
transformStar(speed1,imgs1,180,140,50,false);
timer=setTimeout(autoRotate,1000);
}
timer=setTimeout(autoRotate,1000);
//终止定时器的函数:
function stopAutoRotate(){
clearTimeout(timer);
}
//开启定时器的函数:
function startAutoRotate(){
timer=setTimeout(autoRotate,1000);
}
container.addEventListener('mouseover',stopAutoRotate,false);//鼠标移入停止自动旋转
container.addEventListener('mouseout',startAutoRotate,false);
//添加点击事件实现手动旋转:
container.addEventListener('click',rotateStar,false);
function rotateStar(e){
var e=e||window.event;
var contwidth=this.offsetWidth;
var deg=e.offsetX>=contwidth/2 ? rotatedeg : -rotatedeg;//判断鼠标点击的位置以决定转动的方向
var deg1=e.offsetX>=contwidth/2 ? rotatedeg1 : -rotatedeg1;
speed+=deg;
speed1+=deg1;
transformStar(speed,imgs,180,140,50,true);
transformStar(speed1,imgs1,180,140,50,false);
}
</script>
- 大小: 75.3 KB
分享到:
相关推荐
css3 transform 3D 图片旋转木马
demo预览:http://124.223.118.176/3DPicture ...JS 3D相册旋转木马网页特效是一款炫酷的3D相册旋转木马网页特效,除了图片相册、增加了视频播放和背景音乐播放,相对比普通3D相册旋转木马,功能上了一个层次。
这是一款js 3D旋转木马特效插件。该插件通过CSS3和纯js来完成,可在中以3D旋转的方式来展示一组图片。
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件。该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样。它还带有点击放大图片,显示图片标题和用键盘操作等功能。
js旋转木马3D图片,这本来是jquery官网的一个项目,但是我下载后发现是另一个饼状图的,所以我找了好久。非常炫酷的效果,不好看打我。
Css3-3d-transform__实现图片旋转木马3D效果</ title > </ head > < style > # doc { height : 600 px ; position : relative; overflow : hidden; background-color : # ddd ; } # stage { ...
代码为博客实例代码 http://blog.csdn.net/lmj623565791/article/details/32964301 有问题博客中留言
jQuery 图片版3D旋转木马特效,三维效果围绕成圆形的图片展示,右上角按钮可控制旋转方向,可视为是一款菜单来看待,可在此基础上修改成幻灯片效果,来自国外的CSS达人网站的作品。
3D图片层叠旋转木马切换.zip
jQuery支持触摸屏3D旋转木马特效是一款基于jQuery CSS3实现的炫酷响应式图片切换特效。
旋转木马轮播图特效共有五张图片,每张图片排列的位置是以中间为对称的。实现了想要的轮播效果,可用在网页制作中重要的展示。
这是一款使用CSS3 3D transforms属性来渲染一个3D立体旋转木马,并通过简单的jQuery代码来实现前后按钮控制旋转木马的旋转动画效果。
立体效果很棒,保持360度立体式旋转,类似旋转木马一样的效果 效果描述: 整个效果基于libs.min插件实现 不支持低版本浏览器 在谷歌或者Safari浏览器中效果较好 火狐浏览器中效果较差一些,但...
jQuery支持触摸屏3D旋转木马特效是一款基于jQuery+CSS3实现的炫酷响应式图片切换特效。
是一款css3动画缩放的照片墙特效代码,效果非常不错。推荐下载。不支持IE8及以下浏览器
jQuery带前后按钮旋转木马特效是一款使用CSS3 3D transforms属性来渲染一个3D立体旋转木马,并通过简单的jQuery代码来控制旋转木马的旋转动画。
图片可像3D展示一样。鼠标可移动。单图自动可以旋转,。
jQuery带前后按钮旋转木马特效是一款使用CSS3 3D transforms属性来渲染一个3D立体旋转木马,并通过简单的jQuery代码来控制旋转木马的旋转动画。
jq 3D旋转木马 jQuery QQ登陆框效果 jquery+css3时钟效果 jquery+css3曲线特效图: jquery仿wp动画悬浮标签云插件 jquery倒计时广告 jquery右侧悬浮在线客服代码 jquery坐标图片框裁剪 jquery多功能树插件 jquery...