js实现可旋转的立方体模型
投稿：hebedich
字体：[ ] 类型：转载 时间：
这里给大家分享的是通过js脚本来控制页面中的正方体转动特效，用户可以点击按钮向右转动，也可以向下转动，结合自己的需求控制即可。效果非常棒，这里推荐给大家
这是一个简单的立方体应用，他是很多立方旋转变换的基础，例如实现3D轮播图的实现等。
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&可旋转立方体效果&/title&
&style type="text/css"&
*{padding: 0; margin: 0}
img{border: 0}
ul li{list-style: none}
ul{width: 200 height: 200 margin: 100
position: -webkit-transform-style: preserve-3
/* perspective: 100*/
/*绕中心旋转，坐标轴会随旋转而旋转*/
li{width:200height:200position:text-align:line-height:200font-size:80font-weight:color:#}
/*构造六个面*/
li:nth-child(1){background:rgba(255,0,0,1);-webkit-transform:rotateX(90deg)
translateZ(100px);}
li:nth-child(2){background:rgba(0,255,255,1);-webkit-transform:rotateX(270deg) translateZ(100px);}
li:nth-child(3){background:rgba(255,0,255,1);-webkit-transform:rotateY(90deg) translateZ(100px);}
li:nth-child(4){background:rgba(0,255,0,1);-webkit-transform:rotateY(270deg) translateZ(100px);}
li:nth-child(5){background:rgba(200,200,0,1);-webkit-transform:translateZ(-100px);}
li:nth-child(6){background:rgba(0,0,255,1);-webkit-transform: translateZ(100px) ;}
width: 200 margin: 20
width: 50 height: 30
/*按钮的绝对定位*/
input:nth-child(1){left: 100 top: 0}
input:nth-child(2){left:200top:50}
input:nth-child(3){left:0top:50}
input:nth-child(4){left:100top:100}
input:nth-child(5){left:100top:50}
&script type="text/javascript"&
window.onload = function () {
var x = 0, y = 0;
var ul = document.getElementById('ul');
var inputs = document.getElementsByTagName('input');
for (var i = 0; i&inputs. i++){
inputs[i].onclick =
function run() {
ul.style.webkitTransition = '-webkit-transform 3s linear';
ul.style.oTransition = '-o-transform 3s linear';
ul.style.transition = 'transform 3s linear';
/*旋转的规则，就是x，y方向的deg改变*/
if(inputs[0]==this){x+=90;}
if(inputs[1]==this){y+=90;}
if(inputs[2]==this){y-=90;}
if(inputs[3]==this){x-=90;}
if (inputs[4] == this){
x = 0; y = 0;
ul.style.webkitTransition = '-webkit-transform .1s linear';
ul.style.oTransition = '-o-transform .1s linear';
ul.style.transition = 'transform .1s linear';
ul.style.webkitTransform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
ul.style.oTransform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
ul.style.transform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)';
document.addEventListener('keydown', function(e){
ul.style.webkitTransition='-webkit-transform 3s linear';
switch(e.keyCode){
//回车 （当回车时，迅速转回初始状态）
ul.style.webkitTransition='-webkit-transform 0.1s linear';
ul.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg)"; //变换效果（沿X轴和Y轴旋转）
}, false);document.addEventListener("keydown", function (e) {
ul.style.webkitTransition = '-webkit-transform 3s linear';
ul.style.oTransition = '-o-transform 3s linear';
ul.style.transition = 'transform 3s linear';
switch(e.keyCode){
/* function run(){
ul.style.webkitTransition='-webkit-transform 3s linear'; //设置立方体变换的属性、持续时间、动画类型
if(inputs[0]==this){x+=90;}
if(inputs[1]==this){y+=90;}
if(inputs[2]==this){y-=90;}
if(inputs[3]==this){x-=90;}
if(inputs[4]==this){x=0;y=0; ul.style.webkitTransition='-webkit-transform 0.1s linear';}
//当点击重置按钮时，迅速转回到初始状态。
ul.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg)";
//变换效果（沿X轴和Y轴旋转）
&ul id="ul"&
&li&1&/li&
&li&2&/li&
&li&3&/li&
&li&4&/li&
&li&5&/li&
&li&6&/li&
&div class="container"&
&div class="button"&
&input type="button" value="上"&
&input type="button" value="右"&
&input type="button" value="左"&
&input type="button" value="下"&
&input type="button" value="重置"&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具2013年5月 总版技术专家分月排行榜第一
2016年7月 总版技术专家分月排行榜第二2016年3月 总版技术专家分月排行榜第二2015年12月 总版技术专家分月排行榜第二2014年8月 总版技术专家分月排行榜第二2014年7月 总版技术专家分月排行榜第二2013年6月 总版技术专家分月排行榜第二
本帖子已过去太久远了，不再提供回复功能。2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。本帖子已过去太久远了，不再提供回复功能。}