web前端开源小案例:立方体旋转
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;
如果对你有帮助，麻烦点一下赞，并关注一下本部落，也可以推荐身边爱前端的伙伴关注本部落，大家一起学习和成长！！！
前端学习官方部落群：120342833
web前端开源小案例:立方体旋转的更多相关文章
- 学不动了！微信官方推出 Web 前端和小程序统一框架 Kbone
听说最近微信官方推出了一个统一 Web 前端和小程序的框架 -- Kbone ,特意去看了下... 为什么微信要搞Kbone? 微信小程序的底层模型和 Web 端不同,开发者无法直接把 Web 端的代 ...
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- web前端性能测试小点
关于前端性能的文章: http://www.cnblogs.com/fnng/archive/2011/09/19/2181894.html web应用的前端性能响应时间指浏览器的页面加载时间.浏览器 ...
- Web 前端面试小知识
简历投递 前期为了解自身短板, 可以海投一些试试. 不建议长期海投简历, 对用人单位简历筛选和你自身都没什么好处. 投简历之前最起码要关注以下几点(薪资范围, 公司位置, 职位要求, 是否为培训机构冒 ...
- web前端常用小函数汇总
//去掉html标签 function delHtmlTag(str) { var title = str.replace(/<[^>]+>/g, "");// ...
- HTML前端--各种小案例
掬一捧清水,放逐在江河,融入流逝的岁月,将心洗净; 捻一缕心香,遥寄在云端,在最深的红尘里重逢,将心揉碎; 望一程山水,徘徊在月下,在相思渡口苦守寒冬,将心落寞. 案例一: 隐藏扩展域,并去掉afte ...
- 整理六百篇web前端知识混总
9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...
- Web前端开发最佳实践（1）：前端开发概述
引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...
- 转行做web前端，该如何进行短期快速自学，达到高新就业水平
就目前来说,毕业生如果想毕业就找到高薪的工作,互联网成为了第一个选择,在所有的职业中,不靠任何关系,全凭自己的能力就业,就是程序开发,而web前端开发是目最很热门的行业,在未来五年之内,web前端开发 ...
随机推荐
- PHP学习笔记(2) - 对PHP的印象
一.PHP是一种简单易学的面向过程的弱类型动态脚本语言,本为制作简单的个人网站而开发,现如今经过多个版本的衍变甚至加入了一些面向对象的特性.PHP试图通过发展打进企业级开发,同时也使得它自身也越来越复 ...
- chmod 命令 set uid ,set gid,sticky bit 说明
permission的符号模式表: 模式 名字 说明 r 读 设置为可读权限 w 写 设置为可写权限 x 执行权限 设置为可执行权限 X 特殊执行权限 只有当文件为目录文件,或者其他类型的用户有可执行 ...
- SNA社交网络算法
社交网络需要用到igraph库,所以需要安装.可以在lfd的网站 http://www.lfd.uci.edu/~gohlke/pythonlibs/ 上下载python_igraph,具体的pyth ...
- 在ios开发中有多少常用的加密解密方式（备用）
最常用的是MD5和base64编码,还有DES 3DES AES加密 ios怎么实现RAS加密解密 最近几天折腾了一下如何在iOS上使用RSA来加密.iOS上并没有直接的RSA加密API.但是iOS提 ...
- PHP获得文件的md5并检验是否被修改
由于需要判断上传的文件是否被修改过,需要记录上传文件的md5值,所以这里说一下一下获取文件md5值的方法. md5_file() md5_file() 函数计算文件的 MD5 散列.md5() 函 ...
- 启用EXCHANGE反垃圾邮件功能和重建EXCHANGE邮件系统帐号
How to recreate System Mailbox , FederatedEmail & DiscoverySearchMailbox in Exchange 2010 http:/ ...
- C#学习笔记一:C#开发环境的设置
C#是.NET Framework的一部分,用于编写.NET应用程序. C#集成开发环境(IDE) 微软提供了以下C#编程开发工具: Visual Studio 2010 (VS) Visual C# ...
- Mono for Android 优势与劣势
原文:Mono for Android 优势与劣势 最近有兴趣了解一下Mono for Andriod,也就是使用.NET平台来开发Andriod程序.Mono for Android API 几乎映 ...
- java 常量池
在jvm规范中,每个类型都有自己的常量池.常量池是某类型所用常量的一个有序集合,包括直接常量(基本类型,String)和对其他类型.字段.方法的符号引用.之所以是符号引用而不是像c语言那样,编译时直接 ...
- java学习多线程之线程状态