效果：

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】的更多相关文章

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

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

  2. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  3. web前端学习部落22群分享给需要前端练手项目

    前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...

  4. web前端学习部落22群 明白何谓Margin Collapse

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  5. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  6. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  7. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  8. web前端学习就这9个阶段，你属于哪个阶段？

    第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  9. Web前端学习攻略

    HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript ...

随机推荐

  1. 【C语言入门教程】7.2 结构体数组的定义和引用

    7.2 结构体数组的定义和引用 当需要使用大量的结构体变量时,可使用结构体定义数组,该数组包含与结构体相同的数据结构所组成的连续存储空间.如下例所示: struct student stu_a[50] ...

  2. iOS resign code with App Store profile and post to AppStore

    http://stackoverflow.com/questions/17545452/ios-resign-code-with-app-store-profile-and-post-to-appst ...

  3. brew gradle

    cat /usr/local/Library/Taps/homebrew/homebrew-versions/gradle221.rb GRADLE_HOME=/Users/temp/gradle22 ...

  4. MFC关闭子窗口 如何把父窗口也一起关闭

    在子窗口OnClose() 消息里添加: GetParent()->DestroyWindow();//子窗口关闭 父窗口也同样关闭

  5. HPC Linux

    HPC也就是高性能计算,网格计算.服务器集群等前些日子听了Dr. Allen D. Malony讲座结束时得到两张光盘:一个HPC Linux的live cd,一个virtual box的ova镜像文 ...

  6. 谷歌黑科技WaveNet，更先进的语音合成

    导读 Google 的 DeepMind 研究实验室昨天公布了其在计算机语音合成领域的最新成果——WaveNet.该语音合成系统能够模仿人类的声音,生成的原始音频质量优于目前的文本转语音系统(text ...

  7. [POJ1151]Atlantis

    [POJ1151]Atlantis 试题描述 There are several ancient Greek texts that contain descriptions of the fabled ...

  8. SNMP进阶

    管理信息库:MIB 我们要扩展mib首先必须清楚mib是如何定义的,用的什么语言,有哪些约定,遵循哪些规则等等.这些基本东西掌握过后,我们就可以很轻松的来写自己的mib文件了. 所谓管理信息库,或者M ...

  9. mysql 之基本操作

    已经在板子内部把所有的环境都搭好了,现在的要求是对Mysql 进行一些基本的操作. 在这之前,记录几个要点以防以后忘记. 一,准备工作. 1. 将usr/share/mysql 目录下的 my-lag ...

  10. java的ArrayList使用方法

    在第N个数据后面添加一个数据 用法: 在第1个元素后面添加E list.add(1, "E");