<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style>

             body{

                 margin: 0;

             }

             ul{

                 margin: 0;

                 padding: 0;

                 list-style: none;

             }

             .wrap{

                 width: 198px;

                 height: 198px;

                 padding: 198px;

                 border: 1px solid black;

                 margin: 200px auto;

                 perspective: 300px;

             }

             .wrap ul{

                 width: 198px;

                 height: 198px;

                 position: relative;

                 transition: 10s;

                 transform-style: preserve-3d;

                 transform-origin: center center -99px;

             }

             .wrap ul li{

                 width: 198px;

                 height: 198px;

                 position: absolute;

                 font: 50px/100px "微软雅黑";

                 text-align: center;

                 color: #fff;

                 background-image: url(bg.jpg);

                 background-repeat: no-repeat;

             }

             .wrap ul li:nth-of-type(1){

                 background-color: red;

                 left: 0;

                 top: -198px;

                 transform-origin: bottom;

                 transform: rotateX(90deg);

                 background-position: -393px -393px;

             }

             .wrap ul li:nth-of-type(2){

                 background-color: yellow;

                 left: -198px;

                 top: 0;

                 transform-origin: right;

                 transform: rotateY(-90deg);

                 background-position: 0 -198px;

             }

             .wrap ul li:nth-of-type(3){

                 background-color: blue;

                 left: 0;

                 top: 0;

                 transform: translateZ(0px);

                 background-position: -197px -196px;

             }

             .wrap ul li:nth-of-type(4){

                 background-color: green;

                 left: 198px;

                 top: 0;

                 transform-origin: left;

                 transform: rotateY(90deg);

                 background-position: -393px -196px;

             }

             .wrap ul li:nth-of-type(5){

                 background-color: pink;

                 left: 0;

                 top: 198px;

                 transform-origin: top;

                 transform: rotateX(-90deg);

                 background-position: -589px -196px;

             }

             .wrap ul li:nth-of-type(6){

                 background-color: purple;

                 left: 0;

                 top: 0;

                 transform: translateZ(-198px);

                 background-position: -393px 0;

             }

             .wrap:hover ul{

                 transform:rotateX(720deg) rotateY(720deg) rotateZ(720deg);

             }

         </style>

     </head>

     <body>

         <div class="wrap">

             <ul>

                 <li>1</li>

                 <li>2</li>

                 <li>3</li>

                 <li>4</li>

                 <li>5</li>

                 <li>6</li>

             </ul>

         </div>

     </body>

 </html>

效果图：

css3 3D盒子效果的更多相关文章

  1. [应用][js+css3]3D盒子导航[PC端]

    CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...

  2. 初识css3 3d动画效果

    (先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...

  3. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  4. css3 3d翻转效果

    <div class="demo">       <span class="front">            aaaaaaaaaaa ...

  5. CSS3 3D立方体效果

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  6. css3+javascript旋转的3d盒子

    今天写点css3,3d属性写的3d盒子,结合javascript让盒子随鼠标旋转起来 今天带了css3新属性3d <!DOCTYPE html> <html> <head ...

  7. CSS3带你实现3D转换效果

    前言 在css3中允许使用3D转换来对元素进行格式化,在原本只是2D转化的平面中引入了Z轴.在这之前我们讲解了css3中的2D转换,也就是二维空间变换,本篇的3D转换就是基于原来的2D转换而来,与2D ...

  8. 纯css3 transforms 3D文字翻开翻转3D开放式效果

    详细内容请点击 在线预览立即下载 在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果.教程的目的是展示我们如何能带来一些生活上使用CSS3 . html: <ul class=&q ...

  9. css3之3D翻牌效果

      最近一直在学css3,发现他真的是越来越牛逼.现在的css3已经不在是以前的css了,它能做出的功能效果是我们没法想象的了.它可以实现flash,可以制作一些js能做出来的效果,还可以写出ps做出 ...

随机推荐

  1. Android时间互换代码

    收藏备用. http://www.oschina.net/code/snippet_575610_22694 /** * 获取现在时间 * * @return 返回时间类型 yyyy-MM-dd HH ...

  2. 详解Android动画之Frame Animation

    在开始实例讲解之前,先引用官方文档中的一段话: Frame动画是一系列图片按照一定的顺序展示的过程,和放电影的机制很相似,我们称为逐帧动画.Frame动画可以被定义在XML文件中,也可以完全编码实现. ...

  3. hibernate入门之person表

    下面的hibernate入门person表指的是:根据mysql数据库中的test表和其中的元素-->建立映射表==>进而创建持久化类的顺序来操作了,下面为步骤 1.配置MySQL驱动程序 ...

  4. Windows2012中Python2.7.11+Python3.4.4+Pycharm

    下载软件包 Python2.7.11:  https://www.python.org/ftp/python/2.7.11/python-2.7.11.amd64.msi Python3.4.4:   ...

  5. user.table.column, table.column 或列说明无效

    Oracle统计采用别名出错(user.table.column, table.column 或列说明无效) >>>>>>>>>>>& ...

  6. PGsql解决时差24H

    SELECT sa_ed_time, sa_st_time, case when sa_ed_time > sa_st_time then extract(EPOCH FROM (sa_ed_t ...

  7. [C# 基础知识系列]专题一：深入解析委托——C#中为什么要引入委托

    转自http://www.cnblogs.com/zhili/archive/2012/10/22/Delegate.html 引言: 对于一些刚接触C# 不久的朋友可能会对C#中一些基本特性理解的不 ...

  8. Visual Studio 2013 RTM 中文语言包官方下载地址发布

    如果你下载的是英文版,你想安装一个中文的visual studio 2013,那么你大可不必重新下载安装visual studio 2013,因为微软提供了Visual Studio 2013 RTM ...

  9. [条形码] BarCodeToHTML条码生成类 （转载）

    点击下载 BarCodeToHTML.zip 过多的我就不多说了大家直接看代码吧,这是一个帮助大家生成条码的类,大小大家可以自由的设定 /// <summary> /// 类说明:条码生成 ...

  10. Android 设计随便说说之简单实践（合理组合）

    上一篇(Android 设计随便说说之简单实践(模块划分))例举了应用商店设计来说明怎么做模块划分.模块划分主要依赖于第一是业务需求,具体是怎么样的业务.应用商店则包括两个业务,就是向用户展示appl ...