<!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. VirtualBox安装kali linux过程及安装后无法全屏问题解决方法(2)

    ? 1   安装说完了,现在来看看怎么全屏吧,虚拟机无法全屏跟咸鱼有什么区别... 首先打开vbox,选择设备(Device)选项里面最下面安装增强工具那个选项(insert guest additi ...

  2. Java数据结构（排序篇）

    冒泡排序:是经过n-1趟子排序完毕的,第i趟子排序从第1个数至第n-i个数,若第i个数比后一个数大(则升序,小则降序)则交换两数.大泡在上,小泡在下. 选择排序:每一趟从待排序的数据元素中选出最小(或 ...

  3. nyoj 119 士兵杀敌（三） 【线段树】【单点更新】

    题意:. .. 策略如题. 思路:我们先如果仅仅求某一区间的最大值.我们仅仅须要利用线段树的模板.仅仅须要初始化和询问的时候小小的改动一下.改成祖先结点储存的不再是子节点的和而是两个子节点之间的最大值 ...

  4. .NET 图片解密为BASE64

    #region 图片加密 /// <summary> /// 加密本地文件 /// </summary> /// <param name="inputname& ...

  5. JTCalendar

    JTCalendar是一款简易使用而且能够自己定义事件的日历.包含圈点标识的颜色等都能够自己定义.demo中还提供了转换日历模式的样例. 效果图: " style="margin: ...

  6. php实现邮箱激活功能

    php实现邮箱激活功能 一.样例 二.文件结构 其中swiftmailer-master是第三方插件,用来发验证邮件 三.核心代码 doAction.php 响应页面 <?php header( ...

  7. oracle手工生成AWR报告方法

    AWR(Automatic Workload Repository)报告是我们进行日常数据库性能评定.问题SQL发现的重要手段.熟练掌握AWR报告,是做好开发.运维DBA工作的重要基本功. AWR报告 ...

  8. Java-MyBatis：MyBatis 3 入门

    ylbtech-Java-MyBatis:MyBatis 3 入门 1.返回顶部 1. 入门 安装 要使用 MyBatis, 只需将 mybatis-x.x.x.jar 文件置于 classpath ...

  9. GCD的小结

    同步和异步的区别 同步:在当前线程中执行 异步:在另一条线程中执行 有4个术语比较容易混淆:同步.异步.并发.串行 同步和异步决定了要不要开启新的线程 同步:在当前线程中执行任务,不具备开启新线程的能 ...

  10. ROS常用知识指南

    前言:介绍一些基础常用的知识. 一.标准单位 二.坐标表现方式 三.默认安装位置 通过apt-get安装的软件包, 默认安装位置为:/opt/ros/kinetic/share 四.软件包安装流程 4 ...