<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             #div{

                 width: 900px;

                 height: 900px;

                 border: 0px solid green;

             }

             #box {

                 width: 1000px;

                 height: 1000px;

                 border: 0px solid green;

                 transform-style: preserve-3d;

                 position: absolute;

                 animation: spinCube 15s linear infinite alternate;

             }

             #box div {

                 width: 200px;

                 height: 200px;

                 position: absolute;

                 top: 600px;

                 left: 600px;

                 opacity: 0.7;

                 color: white;

                 text-align: center;

                 font-size: 150px;

                 font-weight: 600;

             }

             @keyframes spinCube {

                 0% {

                     transform: rotateX( 0deg) rotateY( 0deg);

                 }

                 100% {

                     transform:  rotateX( 90deg) rotateY( 360deg);

                 }

             }

             /*参考面 正面*/

             .d1 {

                 background: red;

             }

             /*底部*/

             .d2 {

                 transform: rotateX(90deg);

                 background: yellow;

                 transform-origin: bottom;

             }

             /*顶部*/

             .d3 {

                 transform: rotateX(90deg) translateY(-200px);

                 background: green;

                 transform-origin: top;

             }

             /*左边*/

             .d4 {

                 transform: rotateY(90deg);

                 background: blue;

                 transform-origin: left;

             }

             /*右边*/

             .d5 {

                 transform: rotateY(-90deg);

                 background: black;

                 transform-origin: right;

             }

             /*背面*/

             .d6 {

                 transform: translateZ(-200px);

                 background: gray;

             }

         </style>

     </head>

     <body>

         <div id="div">

             <div id="box">

                 <div class="d1">1</div>

                 <div class="d2">2</div>

                 <div class="d3">3</div>

                 <div class="d4">4</div>

                 <div class="d5">5</div>

                 <div class="d6">6</div>

             </div>

         </div>

     </body>

 </html>

CSS3特效——六面体的更多相关文章

  1. CSS3 特效分解一

    先声明下,下面的特效不是我发明的,对CSS3的创造力还不够,只是看了别人demo的源码,一点一点分析出来的.整理出的笔记,分享给大家.因为源码是好,但是一头扎进去半天出不来. 首先看个登陆框,如下,相 ...

  2. 15款效果很酷的最新jQuery/CSS3特效

    很久没来博客园发表文章了,今天就分享15款效果很酷的最新jQuery/CSS3特效,废话不说,一起来看看吧. 1.3D图片上下翻牌切换 一款基于jQuery+CSS3实现的3D图片上下翻牌切换效果,支 ...

  3. CSS3特效之转化（transform）和过渡（transition）

    CSS3特效之转化(transform)和过渡(transition) 在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition).有人可能会有疑 ...

  4. 圆周运动的css3特效案例

    <!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8&qu ...

  5. 9 款赏心悦目的 HTML5/CSS3 特效

    1.HTML5 WebGL实验,超酷的HTML5 Canvas波浪墙 这是一款HTML5 Canvas实验项目,也是波浪特效,只是这不是真正的水波,而是利用柱体高度的变化实现的波浪墙效果. 在线演示 ...

  6. 14种网页jQuery和css3特效插件代码演示

    1.网页table增删样式代码 演示和下载地址 2.jQuery左右滑动幻灯片插件 演示和下载地址 3.jQuery文字轮播焦点图 演示和下载地址 4.网页文字焦点图切换 演示和下载地址 5.jQue ...

  7. 仿QQ浏览器mac版官网主页 html+css3特效

    这是一款超酷的CSS3动态背景动画特效,CSS3仿QQ浏览器官网彗星动画背景特效. 在线演示本地下载

  8. css3特效插件wow.js

    在使用css3写特效的时候,会遇到比较麻烦的就是css3代码需要大量的调试,但是现在有了wow.js,让写特效变得简单了很多. wow.js官网 https://www.delac.io/wow/in ...

  9. HTML5+CSS3特效设计集锦

    20款CSS3鼠标经过文字背景动画特效 站长之家 -- HTML5特效索引 爱果果h5酷站欣赏  30个酷毙的交互式网站(HTML5+CSS3) 轻松搞定动画!17个有趣实用的CSS 3悬停效果教程 ...

随机推荐

  1. Cookie 工具类

    一.导入 jar 包 <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet ...

  2. mybatis入门截图总结

    原生态jdbc存在的问题 ------------------- ----------------------- ------- 环境的搭建 ----------------------------- ...

  3. SSH整合总结(OA项目)

    代码规范 环境搭建 Struts2 jar包 struts.xml, web.xml Hibernatejar包:核心包, 必须包, jpa, c3p0, jdbchibernate.cfg.xml, ...

  4. snmp--CentOS安装Net-SNMP小计

    http://blog.csdn.net/tmpbook/article/details/39620549

  5. 解决 Mac OS X 10.11 安装 sip 没有权限的问题

    在搭建 PYQT 的过程中我遇上了一个非常恶心的问题,在安装 sip 的时候编译源代码之后的安装过程中一直提示我:Operation not permitted ,我甚至重装了系统也无济于事,终于通过 ...

  6. 前端 自定义format函数

    为字符串创建format方法,用于字符串格式化  {# 前端没有字符串占位符%s的替代方法,以下是自定义字符串替换的方法,以后前端拓展方法都可以使用下面的形式 #} String.prototype. ...

  7. PHP生成二维码的2种方式

    二维码的用处俺也就不说了,看一下用PHP生成的二维码吧. 利用谷歌提供的API 生成二维码,如今非常多国外站点都提供了这类API 看下代码吧<=======================> ...

  8. [C++设计模式] iterator 迭代器模式

    迭代器模式定义:提供一种方法顺序訪问一个聚合对象中各个元素,而又不须要暴露该对象. 迭代器分内部迭代器和外部迭代器.内部迭代器与对象耦合紧密,不推荐使用. 外部迭代器与聚合容器的内部对象松耦合,推荐使 ...

  9. DOM基础----DOM（一）

    DOM(Document Object Model),中文名称为文档对象模型.是处理可扩展标识语言的标准编程接口,主要针对HTML和XML.DOM描绘了一个层次化的节点树,开发者能够加入.改动和移除页 ...

  10. Ubuntu（64位）编译Android源码常见错误解决办法

    2013年07月10日 14:47:27 阅读数:1239 错误: /usr/include/gnu/stubs.h:7:27: error: gnu/stubs-32.h: No such file ...