立方体旋转 【web前端学习部落22群120342833】
效果：
HTML部分：
<body class="body">
<div class="rect-wrap"> <!-- //舞台元素，设置perspective，让其子元素获得透视效果。 -->
<div class="container"> <!-- //容器，设置transform-style: preserve-3d，让其子元素在3D空间呈现 -->
<div class="top slide">1</div> <!-- //立方体的六个面 -->
<div class="bottom slide">2</div>
<div class="left slide">3</div>
<div class="right slide">4</div>
<div class="front slide">5</div>
<div class="back slide">6</div>
</div>
</div>
</body>
CSS:
<style>
.rect-wrap {
position: relative;
perspective: 2000px;
}
.container {
width: 400px;
height: 400px;
transform-style: preserve-3d;
transform-origin: 50% 50% 100px; /* //设置3d空间的原点在平面中心再向Z轴移动200px的位置 */
/* left: 50%;
margin-left: -200px; */
top: 100px;
}
.slide {
width: 200px;
height: 200px;
position: absolute;
background: #000;
line-height: 200px;
text-align: center;
color: #fff;
font-size: 30px;
font-weight: bold;
}
.top {
left: 100px;
top: -100px;
transform: rotateX(-90deg);
transform-origin: bottom;
background: red;
}
.bottom {
left: 100px;
bottom: -100px;
transform: rotateX(90deg);
transform-origin: top;
background: grey;
}
.left {
left: -100px;
bottom: 100px;
transform: rotateY(90deg);
transform-origin: right;
background: green;
}
.right {
left: 300px;
bottom: 100px;
transform: rotateY(-90deg);
transform-origin: left;
background: yellow;
}
.front {
left: 100px;
top: 100px;
transform: translateZ(200px);
background: black;
}
.back {
left: 100px;
top: 100px;
transform: translateZ(0);;
background: blue;
}
@keyframes rotate-frame {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
10% {
transform: rotateX(0deg) rotateY(180deg);
}
20% {
transform: rotateX(-180deg) rotateY(180deg);
}
30% {
transform: rotateX(-360deg) rotateY(180deg);
}
40% {
transform: rotateX(-360deg) rotateY(360deg);
}
50% {
transform: rotateX(-180deg) rotateY(360deg);
}
60% {
transform: rotateX(90deg) rotateY(180deg);
}
70% {
transform: rotateX(0) rotateY(180deg);
}
80% {
transform: rotateX(90deg) rotateY(90deg);
}
90% {
transform: rotateX(90deg) rotateY(0);
}
100% {
transform: rotateX(0) rotateY(0);
}
}
.container{
animation: rotate-frame 30s linear infinite;
}
</style>
1.3维空间图
电脑屏幕中心为原点，横向为X轴，纵向为Y轴，人脸的方向为Z轴；
translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定义位置的移动距离
rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定义元素的旋转角度。
2.perspective属性
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
3.transform-style属性
transform-style: flat|preserve-3d; 默认值为flat,表示子元素以2D平面呈现；perserve-3d表示子元素以3D平面呈现
4.transform-origin属性
transform-origin 属性允许您改变被转换元素的位置（可以理解为元素以哪个位置为旋转原点）。
语法：
transform-origin: x-axis y-axis z-axis;
有大量前端开发工具及学习资料，可以搜群【web前端学习部落22群】进行下载，遇到学习问题也可以问群内专家以及课程老师哟
立方体旋转 【web前端学习部落22群120342833】的更多相关文章
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- web前端学习部落22群开源分享 左边菜单导航
有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...
- web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...
- web前端学习部落22群 明白何谓Margin Collapse
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- web前端学习就这9个阶段，你属于哪个阶段？
第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
- Web前端学习攻略
HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript ...
随机推荐
- 机器学习之Hash集合问题
问题来源与七月学习之 (3.x线性代数与矩阵运算基础)
- Hadoop 面试题redis
Hadoop 面试题之十 548.redis有什么特别之处,为什么用redis,用hbase 不行么? 答:redis 是基于内存的数据库,速度快 551.redis用什么版本? 3.0以上才支持集群 ...
- 请求WebMethod, Ajax 处理更加专注
在WebForm下 开发ajax程序,需要借助于一般处理程序(*.ashx)或web服务(*.asmx),并且每一个ajax请求,都要建一个这样的文件,如此一来,如 果在一个项目中ajax程序多了,势 ...
- CSS3属性选择通配符
CSS3增加了更多的CSS选择器,可以实现更简单但是更强大的功能,比如:nth-child()等. Attribute selectors:在属性中可以加入通配符,包括^,$,* [att^=val] ...
- javaweb项目中的WEB-INF与META-INF
/WEB-INF 放置web应用程序配置文件.jsp页面.lib包.classes文件等. /META-INF java打jar包时,自动生成的一个文件夹.相当于一个信息包,目录中的文件和目录获得ja ...
- 通过NavMeshObstacle解决NavMesh防卡
http://www.unity蛮牛.com/thread-33383-1-1.html. 许久未曾发帖了,最近忙于换工作的问题,经常处于纠结状态,so...偶尔上蛮牛还能看到大家对我的支持,感觉还是 ...
- 流畅web动画的十个法则
from me: web动画能够带来一个非常酷炫的效果,能够让页面有一个更好的用户体验.对于良好的动画性能没有高招,除了将大量的时间放在测试和优化,当然最重要的还是要易于维护. 流畅web动画的十大法 ...
- git 教程（7）--撤销修改
自然,你是不会犯错的.不过现在是凌晨两点,你正在赶一份工作报告,你在readme.txt中添加了一行:
- gulp学习笔记1-定义
1.gulp是前端开发过程中对代码进行构建的自动化工具,可以通过它提供的各种插件实现如:预编译(sass&less).压缩.合并.图片精灵等前端的重复操作 2.基于nodeJS,以js编写插件 ...
- js 函数前的+号
不知啥时候起,函数的闭包需要增加+才能立即执行了. 不加反而报语法错.orz +function() { console.log("Foo!"); }(); 输出: Foo!< ...