java 三维旋转立方体_旋转立方体实现
背板子
放在页侧
/*最外层容器样式*/
.wrap {
width: 100px;
height: 100px;
margin: 150px;
position: relative;
}
/*包裹所有容器样式*/
.cube {
width: 50px;
height: 50px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
animation: rotate linear 20s infinite;
}
@-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
transition: all .4s;
}
/*定义所有图片样式*/
.pic {
width: 200px;
height: 200px;
}
.cube .out_front {
transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back {
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left {
transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_right {
transform: rotateY(90deg) translateZ(100px);
}
.cube .out_top {
transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom {
transform: rotateX(-90deg) translateZ(100px);
}
/*定义小正方体样式*/
.cube span {
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic {
width: 100px;
height: 100px;
}
.cube .in_front {
transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back {
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left {
transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_right {
transform: rotateY(90deg) translateZ(50px);
}
.cube .in_top {
transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom {
transform: rotateX(-90deg) translateZ(50px);
}
/*鼠标移入后样式*/
.cube:hover .out_front {
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back {
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left {
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_right {
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_top {
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom {
transform: rotateX(-90deg) translateZ(200px);
}
java 三维旋转立方体_旋转立方体实现相关推荐
- 如何将四元数方向转化为旋转举证_旋转表示法(持续更新)
旋转矩阵: 旋转矩阵转欧拉角 欧拉角: 欧拉角转旋转矩阵 function rot = rpy2rot(roll,pitch,yaw)Cphi = cos(roll); Sphi = sin(roll ...
- java 三维向量类_计算几何,三维向量的旋转 | 学步园
写这篇日志有两个目的:一来是想测试新装上去的LaTeX插件显示数学公式是否好用(不过貌似通过RSS获取到的日志是没有办法显示的--):二来是对于三维向量绕任意轴的旋转之前我都是用结论的,今天因为做计算 ...
- java 三维数组 魔方_三维数组的横向/纵向输出
哈哈,对于三维数组,可以想象成一个魔方(立方体). 这个立方体由每层->每层的每行->每层的每行的每列组成. 要实现三位数组横向/纵向的输出,需要遍历每个元素进行输出. 假设数组arrra ...
- java 三维向量类_三维向量类
还是在读书的时候帮外专业朋友做作业,用GDI实现三维空间的立方体绘制和旋转的操作,那个时候自己根据<线性代数与空间解析几何>以及<计算机图形学>等课程的相关知识写了一个三维向量 ...
- java 三维场景图_一个Java3D简单三维场景图,测试你的Java3D开发运行环境。
保存文件,命名为UglyCube.java 这是个彩色六面体,可以用鼠标左键旋转,右键拖动,摁下滚轮前后移动缩放. 直接在命令行下转到文件目录,像普通java程序那样编译解释执行.用以测试Java3D ...
- 旋转 翻转_旋转跳跃我闭着眼……1.8吨货车突然腾空翻转!监控拍下不可思议瞬间...
1.8吨货车突然腾空翻转好几圈! 如果不是被监控拍下 这事情怎么说得清哦? 这是发生在宁夏银川市一个路口的真实一幕. 5月9日13时56分许,银川市公安局交警分局西夏区一大队指挥中心接到当事人报警称: ...
- mysql构建数据立方体_数据立方体简介
假定我们有一个电商的销售数据集,其中包括时间.产品.地区.三个维度以及销售额这个度量数据.其中,各维度表构成如下: 时间维度:时间KEY(time_key).日期(day).月(month).季度(q ...
- java 三维旋转立方体_【转】 CATransform3D 矩阵变换之立方体旋转实现细节
原文网址:http://blog.csdn.net/ch_soft/article/details/7351896 第一部分.前几天做动画,使用到了CATransform3D ,由于没有学过计算机图形 ...
- java 三维旋转立方体_Canvas实现3D效果-可旋转的立方体
摘要:Canvas画布是一个二维平面,如何展示出3D效果?通过将三维空间中的Z轴抽取出来,将图像的点投影到与Z轴垂直的平面上,在通过旋转等变换效果,我们就能实现3D效果. 一.建立坐标系 1)立方体坐 ...
- 立方体在三维坐标中的旋转(3D,Spining)
立方体在三维坐标中的旋转(3D,Spining) 示例 HTML CSS 更多有趣示例 尽在 知屋安砖社区 示例 HTML <div id="ThreeJS" style=& ...
最新文章
- 8 种常见的SQL错误用法
- U-Mail邮件服务器树状通讯录实现智能化应用
- python设计一个函数定义计算并返回n价调和函数_音乐编程语言musicpy教程(第三期) musicpy的基础语法(二)...
- 读取数量不定的输入数据
- 绿色背景配什么颜色文字_灰色裤子配什么颜色上衣好看
- 面试中经常会被问到的70个问题
- 马云在《赢在中国》对创业者的经典点评
- git pull keeping local changes
- 充电速度公式_手机充电效率计算
- STM8L USART串口调试
- rabbitMq实现公平分发策略
- bootstrap的pillbox使用
- Java超市会员管理系统
- 阿里云快速搭建个人网站
- TP5简单实现类似京东淘宝多级商品筛选功能。
- Ethercat学习-从站源码移植
- 中国互联网大厂布局元宇宙现状如何?
- mysql hp ux_HP-UX磁盘管理:新磁盘发现、LVM创建与扩展 | 旺旺知识库
- ucosii操作系统和linux,请高手介绍下uCOSII和Linux的差异?
- excel文件损坏修复绝招_磁盘文件目录损坏如何修复——昨天我又学会了电脑的一招应用技巧...
热门文章
- 如何解决CDR绘图时出现的“毛边”瑕疵问题
- cdr软件百度百科_cdr是什么软件?
- 【数字电子技术 Digital Electronic Technology 4】——门电路笔记 之 TTL门电路详细剖析
- 鹏业安装算量软件V8.0.0.92升级内容
- 实验9 面向对象程序设计方法
- HDU6080(很水的计算几何+floyd)
- 服务器磁盘阵列数据恢复方法和数据恢复过程详解
- ArcGis 地理配准注意事项
- java程序员待遇怎么样_现在的java程序员薪资待遇怎么样?
- 深度学习之训练误差和泛化误差