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. 结构型模式(Structural patterns)->外观模式(Facade Pattern)

    动机(Motivate): 在软件开发系统中,客户程序经常会与复杂系统的内部子系统之间产生耦合,而导致客户程序随着子系统的变化而变化.那么如何简化客户程序与子系统之间的交互接口?如何将复杂系统的内部子 ...

  2. [转载]5分钟了解Mockito

    原文链接: http://liuzhijun.iteye.com/blog/1512780/ 5分钟了解Mockito 博客分类: Open SourceJava 一.什么是mock测试,什么是moc ...

  3. skymvc网站测试之mysql数据生成

    skymvc网站测试之mysql数据生成 使用方法: 删除数据 /index.php?m=test_mysql&a=autoDelete 重置自增ID /index.php?m=test_my ...

  4. google+ 登录API 使用 javascript sdk 快速入门 （图解）

    准备工作: 打开Google API 控制台 : https://code.google.com/apis/console 点击 My Project (我的项目) 按照图示流程,您将完成一个goog ...

  5. NSString NSMutableString copy mutableCopy retain weak strong整合

    copy retain assign的差别在于对象属性的set方法 NSString 与 NSMutableString NSString是不可变字符串对象,这句话的意思,结合代码: #import ...

  6. .Net平台下的B/S开发框架

    一.前言 本文主要是对.Net平台下的几种B/S开发框架进行比较.只对比前端展现和界面业务逻辑的部分,对于后台的数据层.业务层.持久层等则不作讨论,因为这些部分是完全可以共用的.  主要从如下几个维度 ...

  7. 定位 - MapKit - 基本使用

    /** *  Terminating app due to uncaught exception 'NSInvalidUnarchiveOperationException', reason: 'Co ...

  8. Ubuntu 安装 JDK 7 / JDK8 的两种方式

    ubuntu 安装jdk 的两种方式: 1:通过ppa(源) 方式安装. 2:通过官网下载安装包安装. 这里推荐第1种,因为可以通过 apt-get upgrade 方式方便获得jdk的升级 使用pp ...

  9. caller和callee的区别

    ①.caller caller返回一个函数的引用,这个函数调用了当前的函数. 使用这个属性要注意: 1 这个属性只有当函数在执行时才有用 2 如果在javascript程序中,函数是由顶层调用的,则返 ...

  10. HTML5之本地文件系统API - File System API

    HTML5之本地文件系统API - File System API 新的HTML5标准给我们带来了大量的新特性和惊喜,例如,画图的画布Canvas,多媒体的audio和video等等.除了上面我们提到 ...