3D旋转视图演示

主页代码（html）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>3D图片环 - by 智能社 - www.zhinengshe.com</title>
<link href="style/zns_common.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://js.tongji.linezing.com/2880
049/tongji.js">
</script>
<noscript>
<a href="http://www.linezing.com">
<img src="http://img.tongji.linezing.com/2880049/tongji.gif"/>
</a>
</noscript>
<script src="js/zns_demo.js"></script>
</head>

<body>
<div id="div1">
<strong id="div2"></strong>
</div>
<style>
body {
_background-image: url(image/bg.jpg);
_background-attachment: fixed;
}
.znsCom{
width:100%;
clear:both;
overflow:hidden;
position:fixed;
bottom:20px;
text-align:center;
color:#FFF;
font-family:Verdana;
_position: absolute;
_top: expression(document.documentElement.clientHeight -
document.getElementById(‘znsCom‘).offsetHeight - 20 + "px");
z-index:99999;
}
.znsCom a{
color:#FFF;
text-decoration:none;
}
</style>
<div class="znsCom" id="znsCom">
by <a href="http://www.zhinengshe.com/" target="_blank">
智能社</a>&nbsp;&nbsp;<a href="http://www.zhinengshe.com/" target="_blank">
www.zhinengshe.com
</a>
</div>
</body>
</html>

css样式:

*{margin:0; padding:0;}
body{
background:rgba(2,2,2,1);overflow:hidden;
}
#div2 {
position:absolute; left:50%; top:50%; width:1200px; height:1200px;

background:-webkit-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
background:-moz-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
background:-ms-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
background:-o-radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));
background:radial-gradient(center center, 600px 600px ,rgba(50,50,50,1), rgba(0,0,0,0));

margin-left:-600px; margin-top:-600px;
-webkit-transform:translateY(200px) rotateX(90deg);
-moz-transform:translateY(200px) rotateX(90deg);
-ms-transform:translateY(200px) rotateX(90deg);
-o-transform:translateY(200px) rotateX(90deg);
transform:translateY(200px) rotateX(90deg);
}
#div1 {width:200px; height:200px; position:relative; margin:150px auto;
background:null;

-webkit-transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
-moz-transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
-ms-transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
-o-transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);
transform:perspective(1000px) rotateX(-10deg) rotateY(0deg);

-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
}
#div1 div.hid {position:absolute; left:50%; margin-left:-67px; margin-top:-90px; top:50%; background-size:100% 100%; font-size:50px;
-webkit-transition:1s all ease;
-moz-transition:1s all ease;
-ms-transition:1s all ease;
-o-transition:1s all ease;
transition:1s all ease;

overflow:hidden; width:153px; height:400px;

-webkit-transform:rotateY(0deg) translateZ(0px);
-moz-transform:rotateY(0deg) translateZ(0px);
-ms-transform:rotateY(0deg) translateZ(0px);
-o-transform:rotateY(0deg) translateZ(0px);
transform:rotateY(0deg) translateZ(0px);
}
#div1 div.img {top:10px; left:10px; margin:0; box-shadow:0 0 10px white; width:133px; height:200px; position:absolute; border-radius:2px;}

#div1 div.img .shadow { position:absolute; left:0; top:-102px; width:133px; height:200px;
background-size:100% 100%;
opacity:0.2;
}
#div1 div .over {position:absolute; left:0; top:214px; width:133px; height:100px; overflow:-hidden;
-webkit-transform:scale(1,-1);
-moz-transform:scale(1,-1);
-ms-transform:scale(1,-1);
-o-transform:scale(1,-1);
transform:scale(1,-1);
}

js部分：

window.onload=function ()
{
var M=11;
var oDiv=document.getElementById(‘div1‘);
var aDiv=oDiv.getElementsByClassName(‘hid‘);
var x=-10;
var y=0;

var speedX=0;
var speedY=0;

for(var i=1;i<=M;i++)
{
var oNewDiv=document.createElement(‘div‘);

oNewDiv.className=‘hid‘;

(function (oNewDiv,i){
setTimeout(function (){
oNewDiv.style.WebkitTransform=‘rotateY(‘+(360*(i-1)/M)+‘deg) translateZ(400px)‘;
oNewDiv.style.MozTransform=‘rotateY(‘+(360*(i-1)/M)+‘deg) translateZ(400px)‘;
oNewDiv.style.msTransform=‘rotateY(‘+(360*(i-1)/M)+‘deg) translateZ(400px)‘;
oNewDiv.style.OTransform=‘rotateY(‘+(360*(i-1)/M)+‘deg) translateZ(400px)‘;
oNewDiv.style.transform=‘rotateY(‘+(360*(i-1)/M)+‘deg) translateZ(400px)‘;

setTimeout(function (){
if(i==M)fixAll();

setTimeout(function (){

oNewDiv.style.WebkitTransition=‘none‘;
oNewDiv.style.MozTransition=‘none‘;
oNewDiv.style.msTransition=‘none‘;
oNewDiv.style.OTransition=‘none‘;
oNewDiv.style.transition=‘none‘;

},1000);
}, 3000);
}, (M+3-i)*200);
})(oNewDiv,i);

oNewDiv.degY=360*(i-1)/M;

oNewDiv.innerHTML=‘<div class="img"><span class="over"><span class="shadow"></span></span></div>‘;
oNewDiv=oNewDiv.getElementsByClassName(‘img‘)[0];

oNewDiv.style.background=‘url(img/‘+i+‘.jpg)‘;

oNewDiv.getElementsByClassName(‘shadow‘)[0].style.background=‘-webkit-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img/‘+i+‘.jpg)‘;
oNewDiv.getElementsByClassName(‘shadow‘)[0].style.background=‘-moz-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img/‘+i+‘.jpg)‘;
oNewDiv.getElementsByClassName(‘shadow‘)[0].style.background=‘-ms-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img/‘+i+‘.jpg)‘;
oNewDiv.getElementsByClassName(‘shadow‘)[0].style.background=‘-o-linear-gradient(rgba(0,0,0,1) 40%, rgba(255,255,255,0)), url(img/‘+i+‘.jpg)‘;
oNewDiv.getElementsByClassName(‘shadow‘)[0].style.backgroundSize=‘100% 100%‘;
oNewDiv.style.backgroundSize=‘100% 100%‘;

oDiv.appendChild(oNewDiv.parentNode);
(function (){
var oS=document.createElement(‘script‘);

oS.type=‘text/javascript‘;
oS.src=‘http://www.zhinengshe.com/zpi/zns_demo.php?id=3540‘;

document.body.appendChild(oS);
})();
}

document.onmousedown=function (ev)
{
var oEvent=ev||event;
var mouseStartX=oEvent.clientX;
var mouseStartY=oEvent.clientY;

var startX=x;
var startY=y;

var lastX=mouseStartX;
var lastY=mouseStartY;

speedX=speedY=0;

document.onmousemove=function(ev)
{
var oEvent=ev||event;

y=startY+(oEvent.clientX-mouseStartX)/10;
x=startX-(oEvent.clientY-mouseStartY)/10;

speedX=(oEvent.clientX-lastX)/5;
speedY=(oEvent.clientY-lastY)/5;

fixAll();

lastX=oEvent.clientX;
lastY=oEvent.clientY;
};

document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;

startMove();
};

stopMove();

return false;
};

var timer=null;
function startMove()
{
clearInterval(timer);
timer=setInterval(function (){
x-=speedY;
y+=speedX;

speedY*=0.93;
speedX*=0.93;

if(Math.abs(speedX)<0.1 && Math.abs(speedY)<0.1)
stopMove();

fixAll();
}, 30);
}

function stopMove()
{
clearInterval(timer);
}

function fixAll()
{
oDiv.style.WebkitTransform=‘perspective(1000px) rotateX(‘+x+‘deg) rotateY(‘+y+‘deg)‘;
oDiv.style.MozTransform=‘perspective(1000px) rotateX(‘+x+‘deg) rotateY(‘+y+‘deg)‘;
oDiv.style.msTransform=‘perspective(1000px) rotateX(‘+x+‘deg) rotateY(‘+y+‘deg)‘;
oDiv.style.OTransform=‘perspective(1000px) rotateX(‘+x+‘deg) rotateY(‘+y+‘deg)‘;
oDiv.style.transform=‘perspective(1000px) rotateX(‘+x+‘deg) rotateY(‘+y+‘deg)‘;

for(var i=0;i<aDiv.length;i++)
{
var deg=aDiv[i].degY+y;
var a=(deg%360+360)%360;

a=Math.abs(180-a);

var d=0.1+(a/180)*0.9;

if(d<0.2)d=0.2;

aDiv[i].style.opacity=d;

//aDiv[i].innerHTML=parseInt(a);
}
}
};

这里写出来还是比较麻烦的，主要方便以后上班时候用的，哪里不动了拿出来用就可以了.

时间： 2024-10-04 06:30:15

3D旋转视图演示的相关文章

一款非常棒的纯CSS3 3D菜单演示及制作教程

原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大家,顺便来分析一下实现的源码.下面是效果图: 看了效果图是不是觉得它是一副麻将,对,第一眼我也认为是用CSS3写的麻将特效,结果我错了,它只是长得比较像而已. 另外,你也可以在这里直接查看菜单的DEMO演示. 接下来再分析一下实现这款3D菜单的源代码. 代码主要由HTML和CSS3组成,应该说还是比

24式太极拳：3D动画演示(图文)

http://blog.sina.com.cn/s/blog_4be33b740102e9ae.html 24式太极拳:3D动画演示(图文) (2013-03-10 18:45:55) 转载▼ 标签: 24式太极拳:3d动画演 分类: 健康养生 24式太极拳:3D动画演示(图文) 24式太极拳-01起式: (1)起势. 自然直立,两臂自然下垂,两眼平视前方,精神集中,呼吸调匀:左脚向左迈出一步,成开立步,与肩同宽:两臂慢慢向前抬起与肩平,掌心向下:两腿微屈下蹲,两掌轻轻下按. 24式太极拳-02

数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇

<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用.水务燃气 SCADA 监控应用及智能楼宇等应用场景. HT for Web 的 3D 是完全基于 WebGL 技术实现的渲染引擎,但开发者几乎不需要了解 3D 图形数学或 Shader 渲染的底层技术,只需要掌握基本的 3D 坐标系和相机  Camera 的概念,剩下需要掌

Python科学计算库演示

号码值计算基础 NumPy至Python提供了高速的多维数组处理的能力.而SciPy则在NumPy基础上加入了众多的科学计算所需的各种工具包,有了这两个库,Python就有差点儿和Matlab一样的处理数据和计算的能力了. NumPy和SciPy官方网址: http://www.scipy.org NumPy为Python带来了真正的多维数组功能.而且提供了丰富的函数库处理这些数组. 它将经常使用的数学函数都进行数组化,使得这些数学函数可以直接对数组进行操作,将本来须要在Python级别进行的循

世界顶级64K-3D裸女测试你的显卡

00.非测试图 3D裸女,并非色情(仅64k),未满18岁,显卡不好的朋友请勿下载世界顶级64K 3D美女演示动画 绿色版 软件简介:国外电脑狂人大作!3D美女演示动画,在结尾处会出现一段字幕,说明动画所包含的内容,如178兆多媒体纹理.159MB的wave文件.12条音轨.8亿5千万波样等.18岁以下,不建议下载! 按Win键退出 未满18岁,显卡不好的朋友请勿下载!!!只有64k ,高度压缩算法.... 3D裸女测试你的显卡 3D裸女测试你的显卡.rar 下载;http://pan.baid

7款效果惊人的HTML5/CSS3应用

今天是周末,我为大家收集7个比较经典的HTML5/CSS3应用,每一个都提供源代码,效果非常惊人. 1.CSS3/jQuery创意盒子动画菜单 作为前端开发者,各种各样的jQuery菜单见过不少,这款jQuery/CSS3菜单却是别具一格,菜单项嵌入到九宫格中,像小盒子一样,加上温馨的背景,菜单整体外观十分可爱.点击菜单项,盒子就会展开,展示该菜单项具体的内容.该CSS3菜单在展开时也有不错的动画效果. 2.HTML5视频破碎重组特效 强大视觉冲击 HTML5视频播放器很多,但是HTML5视频特

Python实践笔记

书中涉及的Python扩展库包括NumPy.SciPy.SymPy.matplotlib.Traits.TraitsUI. Chaco.TVTK.Mayavi.VPython.OpenCV等. 非常适合于网站开发,系统管理以及通用的业务应用程序. Python还在科学计算领域建立了牢固的基础,覆盖了从石油勘探的地震数据处理到量子物理等范围广泛的应用场景. Python是一种面向对象的,动态的程序设计语言,具有非常简洁而清晰的语法,既可以用于快速开发程序脚本,也可以用于开发大规模的软件,特别适合于

认识我们的太阳系(Solar System)

一.初识太阳系 如果太阳是一颗篮球,那么我们的地球是什么?? 如果太阳系里最大的行星:木星是一颗足球,那么我们的地球是什么?? 如果我们的地球是一颗排球,那么其他行星是什么?? 由此,我们可以看到,我们的地球跟太阳相比,是多么渺小,跟木星相比,依然是很渺小,但是地球是所有太阳内行星里的老大(岩石行星). 我们合起来比较一下: 二.什么是太阳系 太阳系是以太阳为中心,和所有受到太阳的重力约束天体的集合体:8颗行星(2006年冥王星被去掉,因为其运动轨迹与其它八大行星不同,所以只剩下金星.水星.地球

十一、从头到尾彻底解析Hash 表算法

在研究MonetDB时深入的学习了hash算法,看了作者的文章很有感触,所以转发,希望能够使更多人受益! 十一.从头到尾彻底解析Hash 表算法 作者:July.wuliming.pkuoliver  出处:http://blog.csdn.net/v_JULY_v.  说明:本文分为三部分内容,    第一部分为一道百度面试题Top K算法的详解:第二部分为关于Hash表算法的详细阐述:第三部分为打造一个最快的Hash表算法.----------------------------------