CSS3 3D旋转立方
##一、3D中的透视
1、透视是我们观察事物的方式
在美术学中,有一种画法叫做透视画法,他让我们对所观察的物体从二维拓展到三维,也就是说,平面的物体变成了立体,占据了独自的空间。请看下图:
2、从二维到三维
在CSS3中有一个属性能让我们以透视的方式去观察元素,他就是perspective,(注意perspective是用在透视元素的父元素上,也就是说一个元素具有perspective属性,其子元素就会获得透视效果),那么拥有透视效果的元素和没有透视效果的元素之间有什么区别呢,请往下看:
- 没有透视效果的子元素
CSS代码
.wrap{width:200px;height:200px;background-color:#f00;
}
.box{transform:rotateY(90deg);width:100px;height:100px;background-color:#f0f;
}
HTML代码
<div class="wrap"><div class="box"></div>
</div>
- 具有透视效果的子元素
在父元素(类名为wrap的元素)加上perspective:800px;
CSS代码
.wrap{perspective:600px;width:200px;height:200px;background-color:#f00;
}
.box{transform:rotateY(90deg);width:100px;height:100px;background-color:#f0f;
}
HTML代码
<div class="wrap"><div class="box"></div>
</div>
##二、如何布局立方体
1、理解perspective
当元素获得透视效果的时候,我们观察他的透视点位于浏览器的前方,而perspective后面的单位决定了透视点在Z轴上的位置,为了方便理解,我们可以看下图:
2、布局立方体
大家都知道立方体有六个面,所以我们就需要六个div元素来表示这六个面,但是div是块级元素,会换行显示,所以我们就需要绝对定位让这六个div元素重合在一起,
接下来就是让这六个div分别表示立方的的六个面了,或许到这里你会有疑问,应该怎么办才能达到我们想要的效果呢?不急,我们可以慢慢来–从立方体中间的切面出发。
假设一个边长为20cm的立方体,我们从中间一刀切下去,获得他的切面如下:
获得了切面之后,要想表示立方体的六个面就很容易了,不知道大家发现了没有,对于正面,可以让切面向前移动10cm(边长的一半)获得,对于背面,可以让切面绕Y轴旋转180度之后再向前移动10cm获得,以此类推,左面,右面,上面和下面分别让切面绕Y旋转-90度,绕Y轴旋转90度,绕X轴旋转90度,绕X轴旋转-90度之后,在向前移动10cm。(为什么都是向前移动呢?因为元素在旋转之后他的Z轴方向也发生了变化。)
3、万事俱备,只欠东风
上面我们已经布局好了立方体,接下来就是让他绕中轴旋转起来了。其实出发点还是和上面的一样,只要让中间的切面旋转,立方体也就自然而然的旋转起来了。
##三、代码部分和demo演示
demo演示
3D旋转魔方演示demo
CSS代码body{margin: 0;}#stage{perspective:800px;perspective-origin:50% 50%;-webkit-perspective:800px;-webkit-perspective-origin:50% 50%;}#stage .cubic{position:relative;transform-style:preserve-3d;width:206px;height:206px;margin:200px auto 0;animation:myfirst 18s linear infinite paused;}#stage .cubic:hover{animation-play-state:running;}#stage .cubic div{position:absolute;opacity:.6;width:200px;height:200px;background-color:#14346f;border:3px solid #1883e7;}.front{transform:translateZ(100px);}.behind{transform:rotateY(180deg) translateZ(100px);}.left{transform:rotateY(90deg) translateZ(100px);}.right{transform:rotateY(-90deg) translateZ(100px);}.upper{transform:rotateX(90deg) translateZ(100px);}.lower{transform:rotateX(-90deg) translateZ(100px);}@keyframes myfirst{from{transform:rotateY(0deg);}to{transform:rotateY(360deg);}}
HTML代码<div id="stage"><div class="cubic"><div class="front"></div><div class="behind"></div><div class="left"></div><div class="right"></div><div class="upper"></div><div class="lower"></div></div></div>
CSS3 3D旋转立方相关推荐
- css3 3d旋转图片立方体特效代码
纯 CSS3 3D 旋转立方体动画特效,该 3D 立方体使用 CSS3 perspective 制作,可以在水平方向.垂直方向和平面视角方向旋转,使用 CSS 来制作立方体动画,效果非常好.下面来看看 ...
- CSS3 3D旋转图片立方体特效
CSS3 3D旋转图片立方体特效代码. 效果图: 这是一个3D的立方体盒子 给盒子添加动画属性 使其可以转动. 原理: 原理其实很简单 我们看到的一个立方体其实就是靠六个平面搭建起来的 如图所示 :六 ...
- CSS3——3D旋转图(跑马灯效果图)
2019独角兽企业重金招聘Python工程师标准>>> CSS3--3D旋转图(跑马灯效果图) CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的 ...
- css3 3d旋转兼容模式下,CSS3 3D 转换
3D Transforms CSS3 允许您使用 3D 转换来对元素进行格式化. 在本章中,您将学到其中的一些 3D 转换方法:rotateX() rotateY() 点击下面的元素,来查看 2D 转 ...
- css3 3D旋转特效
最近自己的网站正在制作,由于是个人网站,所以我傲娇的抛弃了IE,痛快的用起了css3和html5的诸多特效,然而问题亦随之而来.这篇文章的主要讲解在使用css3的3D旋转的时候遇到的文章,错误之处,还 ...
- CSS3 3d旋转图片立方体案例演示
2D动画旋转和位移的基础语法 旋转的基础: 语法:transform:rotate() 1:旋转的是一个度数deg 2:默认情况下,绕着一个中心点进行转动 3:transform:rotatex()绕 ...
- 一步一步来制作CSS3 3D旋转相册
body 内添加如下代码,结构:舞台,容器,图片内容 <div class="stage-area"><div class="container&quo ...
- CSS3 3D旋转立方体
2019独角兽企业重金招聘Python工程师标准>>> 主要用到动画css3 animation,特别注意当完成正方体的过程中,每个面旋转时这个面的坐标系是跟着变换的,只是他们的相 ...
- css同时旋转rotate3d,css3 3D旋转 循环自转
css3D旋转 .transform3D{ transform: perspective(875px) rotateX(25deg) translate3d(0,0,0); transition: a ...
最新文章
- 我就不信看完这篇你还搞不懂信息熵
- tank html5,index.html
- jpa 自定义sql if_mybatis仿jpa 使用@createDate @updateDate
- linux的启动流程和加载程序
- Occluded Pedestrian Detection Through Guided Attention in CNNs 论文总结
- 如何在报表的Header和Footer中使用DataSet中的Field
- 创建一个二维数组,以4行4列左对齐的方式将数组输出
- NoSQL数据库兴起
- 阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第2节 线程实现方式_10_Thread类的常用方法_设置线程名称...
- 美著名电话飞客去世 可凭口哨打免费电话(图)
- 网吧十大漏洞曝光(转)
- SQL注入学习之union联合查询注入
- git项目文件上不显示图标的问题(绿色,红色)
- 2020邮储银行实习面试经验
- MTK G-sensor
- Windows 10文件/文件夹正在使用无法删除的6个解决方法
- 相机投影变换(位姿)
- 每个人的商学院--管理基础(第三章:管理工具)--读书笔记
- uniapp请求的封装
- Android中级控件介绍(五)