<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
@keyframes spin {from { transform: rotateY(0); }to { transform: rotateY(-360deg); }}
@keyframes spin-vertical {from { transform: rotateX(0); }to { transform: rotateX(360deg); }}
/*************** 水平立方体 **************-moz-animation: spin 20s infinite linear;*/
.cube-wrap {perspective: 800px;perspective-origin: -50% -100px;float:left;margin:150px 0 0 200px;}
.cube {position: relative;width: 200px;-moz-transform-style: preserve-3d;}
.cube div{position: absolute;width: 200px;height: 200px;background: rgba(255,255,255,0.1);box-shadow: inset 0 0 30px rgba(125,125,125,0.8);text-align: center;line-height: 200px;font-weight:bold;text-shadow:-1px 1px 5px #f60;color:#fff;font-family: sans-serif;text-transform: uppercase;font-size:30px;}
.depth div.back-pane {transform: translateZ(-100px) rotateY(180deg);}
.depth div.right-pane {transform:rotateY(-270deg) translateX(100px);transform-origin: top right;}
.depth div.left-pane {transform:rotateY(270deg) translateX(-100px);transform-origin: center left;}
.depth div.top-pane {transform:rotateX(-90deg) translateY(-100px);transform-origin: top center;}
.depth div.bottom-pane {transform:rotateX(90deg) translateY(100px);transform-origin: bottom center;}
.depth div.front-pane {transform: translateZ(100px);}
/*************** 垂直旋转的立方体 ***************/
.cube-wrap.vertical .cube {transform-origin: 0 100px;animation: spin-vertical 5s infinite linear;}
.cube-wrap.vertical .depth div.top-pane {transform:rotateX(-270deg) translateY(-100px);}
.cube-wrap.vertical .depth div.back-pane {transform: translateZ(-100px) rotateX(180deg);}
.cube-wrap.vertical .depth div.bottom-pane {transform: rotateX(-90deg) translateY(100px);}
/*************** 平面旋转的立方体 ***************/
.cube-wrap.flat {perspective: none;perspective-origin: 0 0;}
</style>

</head>

<body>
<div class="cube-wrap">
<div class="cube depth">
<div class="front-pane">front</div>
<div class="back-pane">back</div>
<div class="top-pane">top</div>
<div class="bottom-pane">bottom</div>
<div class="left-pane">left</div>
<div class="right-pane">right</div>
</div>
</div>
<div class="cube-wrap vertical">
<div class="cube depth">
<div class="front-pane">front</div>
<div class="back-pane">back</div>
<div class="top-pane">top</div>
<div class="bottom-pane">bottom</div>
<div class="left-pane">left</div>
<div class="right-pane">right</div>
</div>
</div>
<div class="cube-wrap flat">
<div class="cube depth">
<div class="front-pane">front</div>
<div class="back-pane">back</div>
<div class="top-pane">top</div>
<div class="bottom-pane">bottom</div>
<div class="left-pane">left</div>
<div class="right-pane">right</div>
</div>
</div>
</body>
</html>

css3实现立方体效果的更多相关文章

  1. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  2. CSS3 3D立方体效果

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  3. 第102天：CSS3实现立方体旋转

    CSS3实现立方体旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  5. css3的transition效果和transfor效果

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

  6. css3幻灯片换位效果

    <title>css3幻灯片换位效果</title> <style type="text/css">  .flowGallery {width: ...

  7. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  8. html+css3实现长方体效果

    网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 h ...

  9. Css3实现波浪效果3-静态波纹

    一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...

随机推荐

  1. repr

    >>> import datetime >>> today=datetime.datetime.now() >>> today datetime. ...

  2. JDBC实例--JDBC连接池技术解密，连接池对我们不再陌生

    一.为什么我们要用连接池技术? 前面的数据库连接的建立及关闭资源的方法有些缺陷.统舱传统数据库访问方式:一次数据库访问对应一个物理连接,每次操作数据库都要打开.关闭该物理连接, 系统性能严重受损. 解 ...

  3. MySQL Desc指令相关

    MySQL Desc指令相关   2011-08-09 11:25:50|  分类: my基本命令 |举报 |字号 订阅 1.desc tablename; 例如 :mysql> desc jo ...

  4. 在启动vsftpd,有时会报错

    在启动vsftpd,有时会报错:C:>ftp 192.168.0.101Connected to 192.168.0.101.220 (vsFTPd 2.0.5)User (192.168.0. ...

  5. ie上画圆饼图

    概述 主要运用到CSS3的transform.js.jq实现饼状图效果 详细 代码下载:http://www.demodashi.com/demo/10579.html 一.准备工作 1.主要运用到C ...

  6. Oracle EBS WMS功能介绍（二）

    Oracle EBS WMS功能介绍(二) (版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处.否则请与本人联系,违者必究) 出货物流逻辑主要包括 1.      打包.能够进 ...

  7. DataSnap对象传递

    比较简单的方法: 1.引用DBXJSON,  DBXJSONReflect 假设有一个类: type TKid = class FirstName: String; LastName: String; ...

  8. 【LeetCode】93. Restore IP Addresses

    Restore IP Addresses Given a string containing only digits, restore it by returning all possible val ...

  9. eclipse修改文件编码

    http://topic.csdn.net/u/20080724/14/428de399-790d-442a-8340-3a5fb6dcfcee.html[修改文件编码,假设JS]   在Eclips ...

  10. C#异常小知识

    C#中异常捕获相信大家都很熟悉,经常使用的异常捕获有: 1. try{.....} catch (Exception ex) {throw ex;} 2. try{.....} catch (Exce ...