转动的立方体

最新推荐文章于 2019-10-24 19:00:46 发布
最新推荐文章于 2019-10-24 19:00:46 发布
阅读量80 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/branton-design/p/6396724.html
版权

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection"content="telephone=no, email=no" />
</head>
<body>

<style type="text/css">
*{margin: 0;padding: 0;}
html,body{height: 100%;background: black;}
.wrap{
height: 100%;
position: relative;
-webkit-transform-style:preserve-3d;
-webkit-perspective:0px;

-moz-transform-style:preserve-3d;
-moz-perspective:0px;

-webkit-animation:mydhua 5s ease infinite;
-moz-animation:mydhua 5s ease infinite;
}
.box{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin:-100px 0 0 -100px;
line-height: 200px;
text-align: center;
font-size: 48px;
color: white;
}
.box1{
-webkit-transform:rotatey(90deg) translatez(-100px);
-moz-transform:rotatey(90deg) translatez(-100px);
background: rgba(128,0,128,.5);
}
.box2{
-webkit-transform:rotatey(90deg) translatez(100px);
-moz-transform:rotatey(90deg) translatez(100px);
background: rgba(255,0,255,.5);
}
.box3{
-webkit-transform:rotatex(90deg) translatez(100px);
-moz-transform:rotatex(90deg) translatez(100px);
background: rgba(255,153,204,.5);
}
.box4{
-webkit-transform:rotatex(90deg) translatez(-100px);
-moz-transform:rotatex(90deg) translatez(-100px);
background: rgba(0,204,255,.5);
}
.box5{
-webkit-transform: translatez(-100px);
-moz-transform:translatez(-100px);
background: rgba(153,204,255,.5);
}
.box6{
-webkit-transform: translatez(100px);
-moz-transform:translatez(100px);
background: rgba(0,255,255,.5);
}
@-webkit-keyframes mydhua{
0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
100%{-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);-webkit-transform-origin: center center; }
}
@-moz-keyframes mydhua{
0%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);-webkit-transform-origin: center center;}
100%{-moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg); -webkit-transform-origin: center center;}
}
</style>

<div class="wrap">
<div class="box1 box">1</div>
<div class="box2 box">2</div>
<div class="box3 box">3</div>
<div class="box4 box">4</div>
<div class="box5 box">5</div>
<div class="box6 box">6</div>
</div>


<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var url = /(\w+):\/\/([\w.]+)\/(\S*)/;
var text = window.location.href;
var result = text.match(url);
</script>
</body>
</html>

转载于:https://www.cnblogs.com/branton-design/p/6396724.html

weixin_30678349
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java模拟鼠标键盘输入事件 --- Robot 类
谢TS的博客
11-05 2万+
本文链接: http://blog.csdn.net/xietansheng/article/details/78453672 官方JavaDocsApi: java.awt.Robot Robot，机器人。此类用于为测试自动化、自运行演示程序和其他需要控制鼠标和键盘的应用程序生成本机系统输入事件。Robot 的主要目的是便于 Java 平台实现自动测试。 Robot 可以模拟鼠标和键盘的输...
教你用scratch10分钟编出一个旋转长方体
迷你恐龙的博客
03-23 2113
我们先来看一下效果： 效果是不是很棒？其实代码非常非常简单，如下： 先画出造型： 画完之后，我们来编程： 没有搞错，就只有这么点，等它把长方体画完，在按下空格键就可以看到它旋转了，是不是很简单呢？ 谢谢大家，点个赞吧！（^ _ ^） 如果有兴趣，请关注公众号： ...
Java语言实现鼠标拖动旋转立方体
03-15
Java语言实现鼠标拖动旋转立方体 Java语言实现鼠标拖动旋转立方体 Java语言实现鼠标拖动旋转立方体 Java语言实现鼠标拖动旋转立方体
3D立方体旋转动画
w1366352655的博客
12-05 876
3D立方体旋转动画 在线演示 本地下载 posted @ 2018-12-05 20:22 栖息地 阅读(...) 评论(...) 编辑 收藏
H5 立方体小程序
Mr_王小峰的博客
08-23 1388
H5实现六面体的小程序 立方体.html H5立方体 1 2  3 4 5 6   lifangti.css html{ height: 100%; } body{ height: 100%; margin: 0px; background: radial-gradient(ellipse,
Unity 3d实现小球绕立方体转动
07-01
在Unity 3d中实现小球绕立方体转动是一个典型的3D空间运动模拟问题，它涉及到许多关键的技术点，包括对象的旋转、父子关系、坐标系统以及脚本控制。接下来，我们将深入探讨这些知识点。 首先，Unity 3D是基于C#的跨...
OpenGL手势转动立方体
12-19
一个手势控制立方体转动的工程，代码中有非常非常详细的解释以及相关知识点的讲解～
可转动的立方体
03-17
【可转动的立方体】项目是一个面向初学者的教程，主要使用OpenGL图形库与Microsoft Visual C++（简称VC）环境进行开发。这个程序的核心在于演示如何在3D空间中创建并旋转一个立方体，这对于理解OpenGL的基础概念以及...
3D 立方体.zip
03-02
通过调整这些旋转角度，我们可以实现立方体的多维度转动。例如，`rotateX(angle)`将元素绕X轴旋转指定的角度。在Three.js中，我们可以通过设置物体的旋转属性（如object.rotation.x, object.rotation.y, object....
【OpenGL ES】立方体手动旋转(更新版)
11-25
本资源主要讲解如何使用 OpenGL ES 绘制一个立方体，并通过触摸事件实现手动控制立方体的旋转，同时解决了立方体在旋转过程中可能出现的“裂开”问题。 首先，理解OpenGL ES的基本概念是必要的。OpenGL ES 提供了一...
Java3D读取3DMax模型并实现鼠标拖拽、旋转、滚轮缩放等功能
weixin_30861459的博客
04-26 417
/**-------------------------------------------------代码区--------------------------------------------------------**/ import java.applet.Applet;import java.awt.BorderLayout;import java.awt.GraphicsConfi...
3D变化——旋转的立方体
Celinda月兒的博客
08-23 3324
学习了一段时间的html，前两天学习了3d动画，实现了立方体的旋转，其实实现立方体旋转的方法有好多种，我们今天只说一种方法（是我认为比较简单的一种）用到的知识点： 定位 3d旋转 过渡（鼠标点击开始旋转） 首先我们应该先搭建一个立方体，用定位把六个面重叠在一起，然后应用旋转把立方体撘建起来，下面我们来看具体实现的代码1、首先写六个面，重叠在一起<!DOCTYPE html> <html lang="
正方体旋转demo
aizhanqian5077的博客
06-12 145
接着上一篇博客的内容顺藤摸瓜往下想，既然stage有景深这个概念，可以表达3D场景，那么这个stage就可以呈现立体几何咯，于是自己写了个Cubic Demo 一个正方体有6个面，我们把一个正方体平铺开来就是一个十字的形状，然后变换每一面的角度把正方体“折叠”起来！ <!DOCTYPE html> <html> <head> ...
scratch案例——俄罗斯方块
热门推荐
weixin_44602985的博客
03-03 2万+
我们观察一下这个程序的特点，也就是比较独特的部分：1：首选我们看这个程序里有哪些角色，前面7个就是7个方块了，不好理解的是detecter这个角色。剩下的角色都好理解。我们一会再去单独谈detecter这个角色。 2：就是这个方格背景了，所有的方块都要严格的在这个方格背景里移动，这个看着简单，大家学scratch这么久了，应该知道还是有点难度的，如何做到，我们一会讨论。 3：第三个就是每个方块...
3D 旋转立方体的完整代码
liliming86575513的博客
05-09 6972
这个效果的代码如下: <!doctype html> <html> <head> <meta charset='UTF-8'> <title>我的首页</title> <style> *{ ...
Java3D-HelloWorld画正方体
来杯咖啡，随便聊聊。
09-10 1587
[b]关键词:Java3d,正方体[/b] 在运行程序的时候，请确保你已经安装了Java的3D工具包，否则是无法编译通过的。如果要下载Java3D的api可以点下面的连接：[url]http://www.kutoku.info/images/java/100910/java3d-1_5_1-windows-i586.exe[/url]，在Windows下直接安装即可。 官方网站:[url]ht...
java —— 绘制跟随窗口大小变化的立方体+菜单切换图形
beckyUp的博客
05-09 1756
这里绘制了一个五角星和一个随窗口大小变化的立方体，然后通过菜单进行切换 java中有直接绘制矩形的函数，但是这里就直接用直线构造，将每个点的坐标都化作窗口宽度的几分之几，这样就可以随之变化啦，当时函数也可以实现，只要我们构造点的时候采用相对坐标就行 立方体 package poly; import java.awt.*; import java.awt.geom.*; import java...
简单正方体的3d旋转
weixin_44595744的博客
10-24 5176
简单正方体的3d旋转 1.首先搭建正方体模型 代码如下： body { /* 透视：没有透视不能看到3d效果 */ perspective: 1200px; } .content{ display: inline-block; position: relative; width: 200px; ...
OpenGL 鼠标3D旋转简单实现
林一鸣的专栏
07-17 7610
#include #include #include    static float c=M_PI/180.0f; //弧度和角度转换参数 static int du=90,oldmy=-1,oldmx=-1; //du是视点绕y轴的角度,opengl里默认y轴是上方向 static float r=1.5f,h=0.0f; //r是视点绕y轴的半径,
计算正方体转动惯量的程序
最新发布
03-31
以下是计算正方体转动惯量的Python程序： ``` # 定义正方体的边长 a = 2 # 计算正方体对于x轴、y轴、z轴的转动惯量 Ix = (1/6) * a**2 * (a**2 + a**2) Iy = (1/6) * a**2 * (a**2 + a**2) Iz = (1/6) * a**2 * (a...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值