<!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. Profile 动态切换环境

    一.多 Profile 文件我们在主配置文件编写的时候,文件名可以是 application-{profile}.properties/yml默认使用 application.properties 的 ...

  2. [using_microsoft_infopath_2010]Chapter 14高级话题

    本章提要: 1.剖析表单逻辑 2.从多个表单中合并数据 3.重新连接XML表单到XSN模板文件 4.在repeating table中设置默认值 5.离线填写表单的权衡

  3. c#基于udp实现的p2p语音聊天工具

    原创性申明 此博文的出处 为 http://blog.csdn.net/zhujunxxxxx/article/details/40124773假设进行转载请注明出处.本文作者原创,邮箱zhujunx ...

  4. 上机题目（0基础）- Java网络操作-Socket实现client和server端通信（Java）

    非常多刚開始学习的人对于java网络通信不太熟悉.对相关概念也不太明确,这里我们主要实现一下socket通信,socket通信在java中应用十分广泛.比如QQ和MSN等都是基于socket通信的,什 ...

  5. Codeforces Round #284 (Div. 1) B. Name That Tune（概率DP）（难）

    B. Name That Tune time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  6. 用jquery ajax做的select菜单，选中的效果

    //用server端语言赋值给js变量     var departmentId = '<%=提交的值 %>', deviceId='<%=提交的值 %>'     $(fun ...

  7. h5-弹出层layer，提示，顶部横条，

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYkAAAI7CAIAAACWVfAJAAAgAElEQVR4nOy9f1ATWb733z3uOA4kIC ...

  8. BZOJ：3441 乌鸦喝水

    bzoj:3441 乌鸦喝水 题目传送门 Description 一只乌鸦在自娱自乐,它在面前放了n个有魔力的水缸,水缸里装有无限的水. 他准备从第1个水缸飞到第n个水缸,共m次.在飞过一个水缸的过程 ...

  9. Spark RDD概念学习系列之如何创建Pair RDD

    不多说,直接上干货! 创建Pair RDD Python语言 pairs = lines.map(lambda x: (x.split(], x))  scala语言 val pairs = line ...

  10. 对ListView的Item子控件监听并跳转页面

    public class MyAdapteforOwner extends BaseAdapter{ List<OwnerDevice>datas; private Context con ...