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前端开源小案例:立方体旋转的更多相关文章

  1. 学不动了！微信官方推出 Web 前端和小程序统一框架 Kbone

    听说最近微信官方推出了一个统一 Web 前端和小程序的框架 -- Kbone ,特意去看了下... 为什么微信要搞Kbone? 微信小程序的底层模型和 Web 端不同,开发者无法直接把 Web 端的代 ...

  2. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  3. web前端性能测试小点

    关于前端性能的文章: http://www.cnblogs.com/fnng/archive/2011/09/19/2181894.html web应用的前端性能响应时间指浏览器的页面加载时间.浏览器 ...

  4. Web 前端面试小知识

    简历投递 前期为了解自身短板, 可以海投一些试试. 不建议长期海投简历, 对用人单位简历筛选和你自身都没什么好处. 投简历之前最起码要关注以下几点(薪资范围, 公司位置, 职位要求, 是否为培训机构冒 ...

  5. web前端常用小函数汇总

    //去掉html标签 function delHtmlTag(str) { var title = str.replace(/<[^>]+>/g, "");// ...

  6. HTML前端--各种小案例

    掬一捧清水,放逐在江河,融入流逝的岁月,将心洗净; 捻一缕心香,遥寄在云端,在最深的红尘里重逢,将心揉碎; 望一程山水,徘徊在月下,在相思渡口苦守寒冬,将心落寞. 案例一: 隐藏扩展域,并去掉afte ...

  7. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

  8. Web前端开发最佳实践（1）：前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

  9. 转行做web前端，该如何进行短期快速自学，达到高新就业水平

    就目前来说,毕业生如果想毕业就找到高薪的工作,互联网成为了第一个选择,在所有的职业中,不靠任何关系,全凭自己的能力就业,就是程序开发,而web前端开发是目最很热门的行业,在未来五年之内,web前端开发 ...

随机推荐

  1. linux重新增加硬盘容量

    1.先用df -h查看硬盘使用情况 2.fdisk -l查看分区情况 表示还没有挂载 3.fdisk /dev/vdb进行分区 4.mkfs.ext3 /dev/vdb进行格式化 5.mount /d ...

  2. 【pyhton】成员资格运算符

    >>> name = '小甲鱼' >>> '鱼' in name True >>> '肥鱼' in name False 来自小甲鱼的课后习题

  3. Swift(二,元组,可选类型,类型转化)

    一,首先,元组是Swift中特有的,OC中没有元组相关类型,具体怎么用,看下面的例子吧 //1.使用元组来定义一组数据 let infoTuple = (,1.8) let nameTuple = i ...

  4. cocos2dx3.4 导出节点树到XML文件

    l利用cocostudio做UI和场景时,经常要去获取某个节点,cocostudio2.1开始加入了文件的概念,可以创建场景,节点,层等文件,把公用的东西创建到文件里,然后把这个文件拖到场景里使用,达 ...

  5. Qt HTTP内部构架

    QUrl url("http://qt.gitorious.org"); QNetworkRequest request(url); QNetworkAccessManager m ...

  6. Matlab中Rand()函数用法

    一.理论准备 matlab函数randn:产生均值为0,方差 σ^2 = 1,标准差σ = 1的正态分布的随机数或矩阵的函数. 用法:Y = randn(n),返回一个n*n的随机项的矩阵.如果n不是 ...

  7. [转贴]C++开源库

    C++在“商业应用”方面,曾经是天下第一的开发语言,但这一 桂冠已经被java抢走多年.因为当今商业应用程序类型,已经从桌面应用迅速转移成Web应 用.当Java横行天下之后,MS又突然发力,搞出C# ...

  8. 《鸟哥的Linux私房菜》读书笔记一

    1.CPU为一个具有特定功能的芯片,里面含有微指令集,一个CPU又可以分为两个主要的单元:算术逻辑单元和控制单元.CPU读取的数据都是从内存读取来的,内存内的数据是从输入单元传输来的.CPU处理完也要 ...

  9. 【HDOJ】3560 Graph’s Cycle Component

    并查集的路径压缩. #include <stdio.h> #include <string.h> #define MAXNUM 100005 int deg[MAXNUM], ...

  10. git从指定的commit创建分支

    How do I create a new git branch from an old commit? git checkout -b justin a9c146a09505837ec03b Thi ...