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. demo_07选择器练习

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. PHP 自 5.2 到 5.6 中新增的功能详解

    截至目前(2014.2), PHP 的最新稳定版本是 PHP5.5, 但有差不多一半的用户仍在使用已经不在维护 [注] 的 PHP5.2, 其余的一半用户在使用 PHP5.3 [注].因为 PHP 那 ...

  3. JBPM4中常用概念总结

    1. 流程定义(Process Definition)    流程定义是记录在xml文件中的对流程的描述,它包含唯一的流程开始节点和多个流程功能节点,每个节点之间使用transition进行连接. P ...

  4. BZOJ 1052: [HAOI2007]覆盖问题

    BZOJ 1052: [HAOI2007]覆盖问题 题意:给定平面上横纵坐标在-1e9~1e9内的20000个整数点的坐标,用三个大小相同边平行于坐标轴的正方形覆盖(在边界上的也算),问正方形的边长最 ...

  5. OC与JS交互前言－b

    一.WebView加载HTML UIWebView提供了三个方法来加载html资源 1. loadHTMLString:baseURL: 把html文件的内容以字符串的形式加载到webView里面,然 ...

  6. python多线程threading.Lock锁用法实例

    本文实例讲述了python多线程threading.Lock锁的用法实例,分享给大家供大家参考.具体分析如下: python的锁可以独立提取出来 mutex = threading.Lock() #锁 ...

  7. struts2文件下载出现Can not find a java.io.InputStream with the name的错误

    今天在用struts2就行文件下载时出现如下错误: Servlet.service() for servlet default threw exception java.lang.IllegalArg ...

  8. [wikioi]乘积最大

    http://wikioi.com/problem/1017/ 划分型动态规划1.转移方程是:f[i][j]=max(f[k][j-1]*t[k+1][i]),f[i][j]表示前面i个字符加上j个乘 ...

  9. Gdi+实用入门

    大部分是参照其它资料,然后加以自己的理解,那是什么,总结.算不得什么教程.......汗,自己看着就行了..如果别人能看那就更好了. 首先下载GDI+文件包,一个动态链接库,使用GDI+就是调用那个动 ...

  10. [LeetCode] 315. Count of Smaller Numbers After Self (Hard)

    315. Count of Smaller Numbers After Self class Solution { public: vector<int> countSmaller(vec ...