<!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. 06005_Jedis入门

    1.Jedis介绍 (1)Redis不仅是使用命令来操作.现在基本上主流的语言都有客户端支持,比如Java.C.C#.C++.PHP.Node.js.Go等: (2)在官方网站里列有一些Java的客户 ...

  2. 【codeforces 803E】Roma and Poker

    [题目链接]:http://codeforces.com/contest/803/problem/E [题意] 给你一个不完整的胜负平序列(不完整是指中间有些地方为问号,让你自己选择胜负平) 让你复原 ...

  3. spring data JPA 中的多属性排序

    在此介绍我所用的一种方式: 第一步,引包 import org.springframework.data.domain.Sort;import org.springframework.data.dom ...

  4. pthread_cond 唤醒特定线程的方法

  5. jboss final 7.1.1相关error以及解决方式

    问题1 报错提示: MSC00001: Failed to start service jboss.web.deployment.default-host./: Caused by: java.lan ...

  6. MySQL 5.7.10最新版本号源码安装具体过程

    ,重置密码 利用mysqladmin重置密码 [root@wgq_idc_mon_1_12 mysql5710]#./bin/mysqladmin -h localhost -uroot passwo ...

  7. MMORPG大型游戏设计与开发（server 游戏场景 事件）

    游戏截图 场景事件 一个完整的对象一般都拥有事件,至于什么是事件在这里就不多解释了. 在场景中的事件在天龙/武侠世界中的事件包含场景初始化.场景定时器.场景退出.玩家进入场景.角色升级.角色死亡.角色 ...

  8. 本地 配置 Memcache

    如果帮到了您,可以支持一下,谢谢您的支持! Windows下的Memcache安装: 64bit:如果需要win64版,下载 memcached-win64-1.4.4-14.zip(直接下),里面有 ...

  9. Linux 查找一个函数在哪调用

    grep "function has" -R ThinkPHP

  10. 杂项-Java：Spring

    ylbtech-杂项-Java:Spring Spring是一个开放源代码的设计层面框架,他解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用.Spring是于200 ...