<!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. 解决vsftpd乱码

    不管是中文环境还是英文环境,需要改的地方如下: /etc/sysconfig/i18n 其内容改为: LANG="zh_CN.GB2312"SYSFONT="latarc ...

  2. epoll+socket的简单测试例子

    server: #include <sys/socket.h> #include <sys/epoll.h> #include <netinet/in.h> #in ...

  3. Cocos2d-x3.0 iOS 一键编译多个target并打包ipa。

    1.编写app打包为ipa的 shell脚本.将以下代码保存为app2ipa.sh. #!/bin/sh m_appPath="" m_ipaPath="" m ...

  4. tarfile模块可以方操作tar归档文件

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python自带的tarfile模块可以方便读取tar归档文件 #http://www.open-open. ...

  5. Android 进程间通信——Service、Messenger

    概述 介绍绑定服务端的三种方式:同一进程绑定服务.跨进程绑定服务(Messenger).跨进程绑定服务(aidl). 重点说一下通过Messenger.Service实现的进程间通信. 详细 代码下载 ...

  6. 【LeetCode】24. Swap Nodes in Pairs (3 solutions)

    Swap Nodes in Pairs Given a linked list, swap every two adjacent nodes and return its head. For exam ...

  7. Workflow_将一个消息同时发给通过用户（案例）

    2014-06-04 Created By BaoXinjian

  8. PLSQL_统计信息系列04_统计信息的锁定和删除

    20150506 Created By BaoXinjian

  9. Android oncreate onupgrade什么时候被调用

    在学习Android数据库SQLite之前,必须意识到这一点,目前在Android系统中集成的是SQLite3 版本,SQLite是一个开源的嵌入式数据库,他支持NULL.INTEGER.REAL.T ...

  10. Javascript变量名混淆细节

    前言 UglifyJS会对JS文件的变量名进行混淆处理.要理解Javascript变量混淆的细节.我们须要回答下面几个问题: 1.遇到一个变量myName,我们怎么知道这个myName变量要不要混淆 ...