H5(Javascript和CSS)制作3D动画
2016-08-04 14:43
525 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
pm{
-webkit-perspective:800;
-webkit-perspective-origin: 50% 50%;
-webkit-transform-style:-webkit-preserve-3d;
}
#fk{
width:300px;
height:300px;
background:#69e;
position:relative;
top:50px;
left:500px;
-webkit-transform:rotateX(0deg);
-webkit-transform:rotateY(0deg);
-webkit-transform:rotateZ(0deg);
}
#xz{
width:300px;
}
#yz{
width:300px;
}
#zz{
width:300px;
}
</style>
<body>
<div id="pm"><div id="fk"></div></divs>
<input id="xz" type="range" value="0">这是X轴运动<br><br>
<input id="yz" type="range" value="0">这是Y轴运动<br><br>
<input id="zz" type="range" value="0">这是Z轴运动
<script>
var fk = document.getElementById('fk');//获取fk
var xz = document.getElementById('xz');//获取x轴按钮
var yz = document.getElementById('yz');//获取y轴按钮
var zz = document.getElementById('zz');//获取z轴按钮
var jd=10;//声明一个角度变量
var isDown = false;//声明一个空变量用于控制函数
xz.onmousedown = function(){//设置x轴按下事件
isDown = true;
}
xz.onmousemove = function(){//设置x轴按下并且移动事件
if(isDown==true){//当鼠标按下之后才会运行
jd+=10;//每+10度
fk.style.transform = 'rotateX('+jd+'deg)';//把角度重新赋值给fk
}
}
xz.onmouseup = function(){//当鼠标抬起的时候让isdown返回false.这样移动事件就不会触发了
isDown = false;
}
yz.onmousedown = function(){
isDown = true;
}
yz.onmousemove = function(){
if(isDown==true){
jd+=10;
fk.style.transform = 'rotateY('+jd+'deg)';
}
}
yz.onmouseup = function(){
isDown = false;
}
zz.onmousedown = function(){
isDown = true;
}
zz.onmousemove = function(){
if(isDown==true){
jd+=10;
fk.style.transform = 'rotateZ('+jd+'deg)';
}
}
zz.onmouseup = function(){
isDown = false;
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
pm{
-webkit-perspective:800;
-webkit-perspective-origin: 50% 50%;
-webkit-transform-style:-webkit-preserve-3d;
}
#fk{
width:300px;
height:300px;
background:#69e;
position:relative;
top:50px;
left:500px;
-webkit-transform:rotateX(0deg);
-webkit-transform:rotateY(0deg);
-webkit-transform:rotateZ(0deg);
}
#xz{
width:300px;
}
#yz{
width:300px;
}
#zz{
width:300px;
}
</style>
<body>
<div id="pm"><div id="fk"></div></divs>
<input id="xz" type="range" value="0">这是X轴运动<br><br>
<input id="yz" type="range" value="0">这是Y轴运动<br><br>
<input id="zz" type="range" value="0">这是Z轴运动
<script>
var fk = document.getElementById('fk');//获取fk
var xz = document.getElementById('xz');//获取x轴按钮
var yz = document.getElementById('yz');//获取y轴按钮
var zz = document.getElementById('zz');//获取z轴按钮
var jd=10;//声明一个角度变量
var isDown = false;//声明一个空变量用于控制函数
xz.onmousedown = function(){//设置x轴按下事件
isDown = true;
}
xz.onmousemove = function(){//设置x轴按下并且移动事件
if(isDown==true){//当鼠标按下之后才会运行
jd+=10;//每+10度
fk.style.transform = 'rotateX('+jd+'deg)';//把角度重新赋值给fk
}
}
xz.onmouseup = function(){//当鼠标抬起的时候让isdown返回false.这样移动事件就不会触发了
isDown = false;
}
yz.onmousedown = function(){
isDown = true;
}
yz.onmousemove = function(){
if(isDown==true){
jd+=10;
fk.style.transform = 'rotateY('+jd+'deg)';
}
}
yz.onmouseup = function(){
isDown = false;
}
zz.onmousedown = function(){
isDown = true;
}
zz.onmousemove = function(){
if(isDown==true){
jd+=10;
fk.style.transform = 'rotateZ('+jd+'deg)';
}
}
zz.onmouseup = function(){
isDown = false;
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web2.0设计师工具箱,国外的一些网站制作资源，css,javascript,ajax,设计素材等
- CSSDIVJavascript制作滑动门菜单技术
- Unity3D动画制作之一（C#）
- 简单图片3D变换动画的制作（使用transition、transform）
- 10个顶级的CSS和Javascript动画框架推荐
- CSS+javascript制作颜色对话框
- MATLAB 3D 动画制作（三）- 实时随动3D动画设计
- 10个顶级的CSS和Javascript动画框架推荐
- Google 首页用 Javascript 和 Css 实现舞蹈家跳舞的动画
- MATLAB 3D 动画制作（一）- 3D 图形设计
- 利用CSS和javascript实现Google首页的动画效果
- XHTML+CSS+JavaScript制作的动态导航条(一)
- XHTML+CSS+JavaScript制作的动态导航条(二)
- 中文前端UI框架Kit（五）支持Css全属性/Css Hack/Css3属性/颜色渐变的Javascript动画，相比JQuery和Mooltools，功能更为强大，这不是标题党!
- JavaScript 结合 CSS 制作带背景图的下拉菜单
- 3D MAX 动画制作教程
- CSS+DIV+Javascript制作滑动门菜单技术
- 模仿google首页图片动画效果 (css+javascript)
- javaScript制作3D效果展示
- MATLAB 3D 动画制作（二）- 3D 动画动作设计