<!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. 【hihocoder 1312】搜索三·启发式搜索(启发式搜索写法)

    [题目链接]:http://hihocoder.com/problemset/problem/1312?sid=1092363 [题意] [题解] 定义一个A*函数 f = step+val 这里的v ...

  2. c#设置button透明

    c#设置button透明 1.使用代码进行设置: this.button_welcom_login.FlatStyle = System.Windows.Forms.FlatStyle.Flat; t ...

  3. java spring中对properties属性文件加密及其解密

    http://blog.csdn.net/yaerfeng/article/details/26561791

  4. HTML乱码问题

    第一:定义网页显示编码.如果不定义网页编码,那么我们浏览网页的时候,IE会自动识别网页编码,这就有可能会导致中文显示乱码了.所以我们做网页的时候,都会用“<meta http-equiv=”Co ...

  5. 这里是指推送通知跟NSNotification有区别：

    1.NSNotification是系统内部发出通知,一般用于内部事件的监听,或者状态的改变等等,是不可见的2.本地通知与远程通知是可见的,主要用于告知用户或者发送一些App的内容更新,推送一些相关的消 ...

  6. word2010无法显示endnote x7插件及破解endnote x7

    最近本人由于要写文章需要使用endnotex7,相比于mendeley和noteexpress,文献管理和引用我喜欢endnote x7,阅读喜欢mendeley.可是由于之前用的正版30天到期了,破 ...

  7. 使用IDEA 创建 MAVEN 项目

    一,项目创建 1.File---New---project    选择maven       勾选Create from archtype,找到并选择org.apache.maven.archtype ...

  8. shell编程01—shell基础

    01.学习shell编程需要的知识储备 1.vi.vim编辑器的命令,vimrc设置 2.命令基础,100多个命令 3.基础.高端的网络服务,nfs,rsync,inotify,lanmp,sersy ...

  9. 【转】C# ABP WebApi与Swagger UI的集成

    以前在做WebAPI调用测试时,一直在使用Fiddler测试工具了,而且这个用起来比较繁琐,需要各种配置,并且不直观,还有一点是还得弄明白URL地址和要传递的参数,然后才能调用.  最近新入职,公司里 ...

  10. 使用 Travis-CI 的五个理由

    I use the service of travis-ci now for a year. In that time the continuous integration has often poi ...