黑马程序员技术交流社区

标题: 分享一个3D立方体（css3+javascript实现） [打印本页]

作者: java_dream 时间: 2014-8-24 22:42
标题: 分享一个3D立方体（css3+javascript实现）
<html>
<head>
  <style type="text/css" id="css">
  body,div{margin:0;padding:0;}
  div#container{width:400px;height:400px;margin:0 auto;position:relative;background:#65bf21;-webkit-perspective:800px;-webkit-perspective-origin:50% 10%;}
  div#container div{width:200px;height:200px;position:absolute;}
  div#wrap{left:100px;top:100px;-webkit-transform-style:preserve-3d;-webkit-animation:test 10s infinite linear;opacity:0.8;}
  div#wrap div{background:#cff;opacity:1;line-height:200px;font-size:100px;text-align:center;}
  div#wrap div:nth-of-type(1){-webkit-transform:rotateX(0deg) translateZ(100px);}
  div#wrap div:nth-of-type(2){-webkit-transform:rotateX(-90deg) translateZ(100px);}
  div#wrap div:nth-of-type(3){-webkit-transform:rotateX(-180deg) translateZ(100px);}
  div#wrap div:nth-of-type(4){-webkit-transform:rotateX(-270deg) translateZ(100px);}
  div#wrap div:nth-of-type(5){-webkit-transform:rotateY(-90deg) translateZ(100px);}
  div#wrap div:nth-of-type(6){-webkit-transform:rotateY(90deg) translateZ(100px);}

  @-webkit-keyframes test
  {
  from{-webkit-transform:rotateX(0deg) rotateY(0deg);}
  to{-webkit-transform:rotateX(-360deg) rotateY(-360deg);}
  }
  </style>
  <script src="miaov.js"></script>
  <script>
  window.onload = function()
  {
   var oDiv = document.getElementById('wrap');

   oDiv.onmousedown = function(ev)
   {
   var oEv = ev || window.event;
   var initX = oEv.clientX;
   var initY = oEv.clientY;

   document.onmousemove = function(ev)
   {
   var oEv = ev || window.event;
   var iTargetX = oEv.clientX - initX;
   var iTargetY = oEv.clientY - initY;

   oDiv.style.WebkitTransform = 'rotateX('+iTargetY+'deg) rotateY('+iTargetX+'deg)';
   document.title = iTargetX+":"+iTargetY;
   }
   document.onmouseup = function()
   {
   document.onmousemove = null;
   document.onmouseup = null;
   }
   return false;
   }
  }
  </script>
</head>
<body>
<div id="container">
   <div id="wrap">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   </div>
</div>
</body>
</html>

立方体.png (21.07 KB, 下载次数: 79)

css3立方体

作者: 黑马黄武先 时间: 2014-8-25 03:20
谢谢分享！:lol

作者: SmallRooker 时间: 2014-8-25 05:45
谢谢分享！:D

作者: THE_FUTURE 时间: 2014-8-25 09:38
谢谢分享。。。。

作者: 喜爱 时间: 2014-8-25 10:12
感谢分享！。。。。。。

作者: 孙雯 时间: 2014-9-1 22:17
很漂亮~~~

作者: 天邃任我桓 时间: 2014-9-3 00:56
谢谢分享！

作者: 依然如故 时间: 2014-9-3 08:22
目前来说看不完全懂的！！

作者: java_dream 时间: 2014-9-3 08:37

依然如故发表于 2014-9-3 08:22
目前来说看不完全懂的！！

后面再慢慢学吧

作者: 依然如故 时间: 2014-9-3 08:43

java_dream 发表于 2014-9-3 08:37
后面再慢慢学吧

恩恩，如果有机会进黑马的话，这些基础还会再讲一遍吗？？

作者: java_dream 时间: 2014-9-3 09:22

依然如故发表于 2014-9-3 08:43
恩恩，如果有机会进黑马的话，这些基础还会再讲一遍吗？？

在前期会讲的

作者: 依然如故 时间: 2014-9-3 09:51

java_dream 发表于 2014-9-3 09:22
在前期会讲的

为什么老师跟我说不讲了！

作者: java_dream 时间: 2014-9-3 10:01

依然如故发表于 2014-9-3 09:51
为什么老师跟我说不讲了！

这个。。。其实我也不太清楚了，如果不讲就自己学了

作者: 七年锦·旅行 时间: 2014-9-3 10:53
这个是HTML,JavaScript的内容吧！以前接触过一点儿，有些不是完全懂！

作者: 七年锦·旅行 时间: 2014-9-3 10:54
用代码实现这个立方体，运行效果看起来很漂亮！

作者: java_dream 时间: 2014-9-3 10:59

七年锦·旅行发表于 2014-9-3 10:54
用代码实现这个立方体，运行效果看起来很漂亮！

你用Java写？你面试没？

作者: 七年锦·旅行 时间: 2014-9-3 11:06

java_dream 发表于 2014-9-3 10:59
你用Java写？你面试没？

没有呢！我感觉到很危险啊！现在没面试，总分才得了63分，大概105分才能进！依我的现有水平，要得40分都很难！昨天客服老师说，建议去Java基础班，再学学，重新走流程，一个半月，也相当于可以系统的复习一遍！

作者: java_dream 时间: 2014-9-3 11:31

七年锦·旅行发表于 2014-9-3 11:06
没有呢！我感觉到很危险啊！现在没面试，总分才得了63分，大概105分才能进！依我的现有水平，要得40分都 ...

我的分数跟你一样啊

作者: java_dream 时间: 2014-9-3 11:32

七年锦·旅行发表于 2014-9-3 11:06
没有呢！我感觉到很危险啊！现在没面试，总分才得了63分，大概105分才能进！依我的现有水平，要得40分都 ...

你在深圳还是北京？

作者: 七年锦·旅行 时间: 2014-9-3 11:34

java_dream 发表于 2014-9-3 11:32
你在深圳还是北京？

北京！你呢？

作者: java_dream 时间: 2014-9-3 11:36

七年锦·旅行发表于 2014-9-3 11:34
北京！你呢？

我在深圳，如果在一个地方我们可以一起学了

作者: 七年锦·旅行 时间: 2014-9-3 11:49

java_dream 发表于 2014-9-3 11:36
我在深圳，如果在一个地方我们可以一起学了

呵呵！你报的也是JavaEE+物联云计算吗？

作者: java_dream 时间: 2014-9-3 14:33

七年锦·旅行发表于 2014-9-3 11:49
呵呵！你报的也是JavaEE+物联云计算吗？

是的，刚面试了，40分，还是有点危险

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2