java3D实现空间立方体_CSS3打造3D立方体
前言:今天用css3实现正方体。通过此案例,可以对css3在实现3D效果方面的属性有一定了解。
案例效果
HTML分析
最外层的.container触发3d效果,#cube保留父元素的3d空间同时包裹正方体的6个面,给每个面设置对应的class属性。
HTML代码如下:
CSS分析
1. 外观
给立方体的每个面设置不同的颜色,并且对字体进行设置。
代码如下:
#cube figure{
font-size: 120px;
line-height: 196px;
font-weight: bold;
color: white;
text-align: center;
}
.front { background: hsla( 0, 100%, 50%, 0.5 ); }
.back { background: hsla( 60, 100%, 50%, 0.5 ); }
.right { background: hsla( 120, 100%, 50%, 0.5 ); }
.left { background: hsla( 180, 100%, 50%, 0.5 ); }
.top { background: hsla( 240, 100%, 50%, 0.5 ); }
.bottom { background: hsla( 300, 100%, 50%, 0.5 ); }
2. 定位
#cube及其包裹的子元素figure相对最外层.container绝对定位,.figure给2px的边框。
代码如下:
.container{
width: 200px;
height: 200px;
position: relative;
}
#cube{
width: 100%;/*让#cube与.container的transform-origin一样*/
height: 100%;
position: absolute;
}
#cube figure{
width: 196px;
height: 196px;
border:2px solid black;
position: absolute;
}
3. 3D效果
首先,在脑海里要有一个3D坐标系
通俗的说,Z轴就是垂直于电脑屏幕的轴,正方向指向正在电脑面前的你,X轴就是左右,Y轴就是上下。
(1) 相关属性简介:
transform相关函数:
rotate:围绕某个轴进行旋转,如rotateY(30deg)就是围绕Y轴旋转30度。正值为顺时针旋转,负值逆时针。
translate:在某个轴上的位移。translateZ(10px)就是在Z轴的正方向上位移10px,也就是说在原始坐标下,元素朝你位移了10px,和你接近了10px.
3D属性
perspective:创造3D空间,值越小,元素的纵深越大,3D效果越明显。需设置在父元素。
transform-style:有flat和preserve-3d两个值。flat为2D平面,preserve-3d为保留父元素创造的3D空间。flat为默认值。
需要详细了解可以参看:
mdn
w3cplus
当然,最好的办法还是自己一个个属性的尝试。最好用在线编辑器可以实时查看效果。比如jsbin
(2) 效果分析
首先,我们要创造3D空间,让子元素使用父元素创造的3D空间。
.container{perspective:1000px;}
#cube{transform-style:preserve-3d;}
在创造3D空间后,根据上面你已了解的transform相关函数效果,我们对右面进行一个重点分析,其他面也可采用相同的思想创建。
对于右面,首先绕Y轴旋转90度,这时右面应该是垂直居中于正面.front的。接下来,我们应该让.right右移.front一半的距离,即100px。
请注意:
如果这时候你写的是translateX(100px)的话,你会发现右面是向里面移动的。这是因为:旋转后坐标系会跟着旋转,也就是说,.right绕Y轴旋转90度后,坐标轴也随着转了90度,此时.right的Z轴已经跟着转到了我们的“右边”去了(不知道这样描述会不会懂...)。
因此,我们应该使用translateZ(100px)实现.right向“右”移动100px.
由于坐标轴会跟着元素旋转,所以我们在书写时一定要注意transform function的书写顺序。你可以先translateZ(100px)再rotateY(90deg)看看效果一样不。
同理,对于其他几面可以根据这个思路来分析。
代码如下:
.front{transform:rotateY(0deg) translateZ(100px);}
.back{transform:rotateX(180deg) translateZ(100px);}
.right{ transform:rotateY(90deg) translateZ(100px);}
.left{transform:rotateY(-90deg) translateZ(100px);}
.top{transform:rotateX(90deg) translateZ(100px);}
.bottom{transform:rotateX(-90deg) translateZ(100px);}
这样,我们用CSS3打造的立方体就实现了。
4. 过渡效果
我们让鼠标hover#cube时,figure再进行3D的变化。
#cube:hover .front{transform:rotateY(0deg) translateZ(100px);}
#cube:hover .back{transform:rotateX(180deg) translateZ(100px);}
#cube:hover .right{ transform:rotateY(90deg) translateZ(100px);}
#cube:hover .left{transform:rotateY(-90deg) translateZ(100px);}
#cube:hover .top{transform:rotateX(90deg) translateZ(100px);}
#cube:hover .bottom{transform:rotateX(-90deg) translateZ(100px);}
最后,我们让这个变换有一个过渡的效果
#cube figure{transition:all 1s;}
OK.这样,我们的效果就实现啦!
长方体的实现
在实现长方体的时候,我们要注意不同面的宽高、位移不一样。
HTML代码如下:
CSS代码如下:
*{margin:0;}
.container{
width:300px;
height:200px;
position:relative;
perspective:1000px;
margin:50px auto;
}
#box{
width:100%;
height:100%;
position:absolute;
transform-style:preserve-3d;
transition:all 1.5s;
}
#box figure{
position:absolute;
font-size:120px;
font-weight:bold;
color:white;
line-height:196px;
text-align:center;
border:2px solid black;
transition:all 1s;
}
.front,.back{width:296px;height:196px;}
.right,.left{width:96px;height:196px;left:100px;}
.top,.bottom{width:296px;height:96px;top:50px;}
.front { background: hsla( 0, 100%, 50%, 0.5 ); }
.back { background: hsla( 60, 100%, 50%, 0.5 ); }
.right { background: hsla( 120, 100%, 50%, 0.5 ); }
.left { background: hsla( 180, 100%, 50%, 0.5 ); }
.top { background: hsla( 240, 100%, 50%, 0.5 ); }
.bottom { background: hsla( 300, 100%, 50%, 0.5 ); }
#box:hover .front{transform:rotateY(0deg) translateZ(50px);}
#box:hover .back{transform:rotateY(180deg) translateZ(50px);}
#box:hover .right{transform:rotateY(90deg)translateZ(150px);}
#box:hover .left{transform:rotateY(-90deg) translateZ(150px);}
#box:hover .top{transform:rotateX(90deg) translateZ(100px);}
#box:hover .bottom{transform:rotateX(-90deg) translateZ(100px);}
#box:hover{transform:translateZ(200px);}
总结
其实实现这个,收获最大的就是知道了坐标轴会改变,坐标轴会改变,坐标轴会改变,以及transform的几个函数的效果。因此,一定要注意transform函数的书写顺序。
参考资料
java3D实现空间立方体_CSS3打造3D立方体相关推荐
- python 3d绘图立方体_python绘制3D立方体
我想绘制一个平行六面体.其实我从python脚本开始画立方体为:python绘制3D立方体 import numpy as np from mpl_toolkits.mplot3d import Ax ...
- linux桌面立方体,为Ubuntu 3D立方体每个桌面显示配置不同壁纸的方法[图文]
Ubuntu中Compiz的3D立方体桌面的确很绚很酷,但3D立方体的不同桌面设置不同壁纸总是搞不好. 无论本人在compiz configure里怎样设置.每个桌面显示总是一样的壁纸. 经过一段时间 ...
- html立方体翻转,jQuery 3D立方体翻转插件
这是一款jQuery 3D立方体翻转插件.该插件可以创建水平或垂直的3d立方体效果,可以控制立方体的翻转速度,定义触发立方体旋转的事件等. 使用方法 在页面中引入jquery和jquery.flipb ...
- 图片3d立方体旋转html代码,超酷3D立方体空间旋转图片画廊特效
这是一款效果非常炫酷的CSS3 3D立方体空间旋转图片画廊特效.该特效实际是一个3D立方体,在其内部显示图片.在点击立方体每一面的图片时,这张图片就会放大到屏幕的中间,效果非常的酷. 因为IE浏览器不 ...
- OpenCV中的姿势估计及3D效果(3D坐标轴,3D立方体)绘制
OpenCV中的姿势估计及3D效果(3D坐标轴,3D立方体)绘制 1. 效果图 2. 原理 3. 源码 3.1 姿态估计后绘制3D坐标轴 3.2 姿态估计后绘制立方体 参考 这篇博客将延续上一篇博客: ...
- java 三维旋转立方体_Canvas实现3D效果-可旋转的立方体
摘要:Canvas画布是一个二维平面,如何展示出3D效果?通过将三维空间中的Z轴抽取出来,将图像的点投影到与Z轴垂直的平面上,在通过旋转等变换效果,我们就能实现3D效果. 一.建立坐标系 1)立方体坐 ...
- 用纯C3制作一个3d立方体动态相册送给你的女朋友
今天我们制作一个3d立方体相册 制作之前我们先了解下3D 3D立体空间 利用3d时必须要了解3d的一些属性以及功能函数熟练运用 属性: prespective : 景深(近大远小) 是我们观察物体的一 ...
- Cesium在地球上添加一个3D立方体
接此: https://blog.csdn.net/bcbobo21cn/article/details/110300047 var redBox = viewer.entities.add({nam ...
- css33d图片轮播_1.Web前端之CSS3中3D立方体以及3D轮播图
1.3D坐标系 3D坐标可以用左手来模拟,其中大拇指方向默认是X轴正方向,食指方向是Y轴正方向,中指方向是Z轴正方向.注意:当设置transform:rotateX(90deg)时,相当于将X轴转动9 ...
最新文章
- 人工智能能否跨越意识鸿沟?
- 【推荐系统】基于图嵌入技术的推荐系统长文综述
- bat判断文件是否存在_BAT面试必问题系列:JVM判断对象是否已死和四种垃圾回收算法总结...
- win7的一些小知识
- Android异常处理——try、catch、finally、throw、throws
- Ubuntu的常识使用了解2
- SaaS行业乘风杨帆,中小企业市场潜力分析
- 28个数控编程代码大全,众多程序员呕心沥血的私货
- 增程式串联混合动力实际项目模型,本模型基于Cruise软件和Simulink软件共同搭建完成,并实际应用,本资料包包含所有源文件
- 电力线载波通信(PLC)简介
- python+selenium,打开浏览器时报selenium.common.exceptions.WebDriverException: Message: 'chromedriver' execut
- 东方元鼎付淼:移动互联网创业门槛已降低
- detached entity passed to persist问题与解决方案
- 中国智能制造发展趋势!
- 继金字塔数142857外第二组世界上最神奇的数字
- 计算机桌面怎么锁,电脑怎么上锁,详细教您怎么给电脑屏幕上锁
- 求a和b的最大公约数
- 离散数学课后习题-斑马难题
- 声学测试软件手机版_清华31岁教授将手机天线尺寸缩小100倍,未来有望植入人体|专访...
- Error:(7, 21) java: 程序包javax.servlet不存在,Maven项目请求资源不可用