<!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. Ubuntu vim+ ctags(包含系统函数) + taglist 配置 分类： vim ubuntu 2015-06-09 18:19 195人阅读 评论(0) 收藏

    阅读大型代码,我们经常需要打开很多的代码文件,搜索各种定义.windows下用惯了ide的朋友,转战Linux的时候可能会觉得很难受,找不到合适的阅读工具.其实万能的vim就可以实现.下面介绍一下vi ...

  2. Java 加密 base64 encode

    版权声明:本文为博主原创文章,未经博主允许不得转载. [前言] 计算机中的数据都是二进制的,不管是字符串还是文件,而加密后的也是二进制的, 而我们要看到的往往是字符串,本文就介绍了将byte[]转为各 ...

  3. 对MYSQL IFNULL函数的使用进行了具体的叙述

    下文对MYSQL IFNULL函数的使用进行了具体的叙述.供您參考学习.假设您在MYSQL IFNULL函数使用方面遇到过类似的问题,最好还是一看. MYSQL IFNULL(expr1,expr2) ...

  4. PCAP 文件内容解析命令

    针对网络接口.端口和协议的数据包截取.假定你要截取网络接口eth1,端口号6881的tcp数据包.数据文件保存为test.pcap. tcpdump -w test.pcap -i eth1 tcp ...

  5. PureMVC(JS版）源码解析（一）：观察者模式解析

          假设一种情景,在程序开发中,我们需要在某些数据变化时,其他的类做出相应,例如在游戏中,升级一件装备,会触发玩家金币数量改变,背包数据改变和冷却队列数据改变等等.我们不可能设置setInte ...

  6. PHP之APC缓存详细介绍

    1.APC缓存简介 APC,全称是Alternative PHP Cache,官方翻译叫"可选PHP缓存".它为我们提供了缓存和优化PHP的中间代码的框架. APC的缓存分两部分: ...

  7. Sql Xml

    /* sql xml 入门: --by jinjazz --http://blog.csdn.net/jinjazz 1.xml: 能认识元素.属性和值 2.xpath: 寻址语言,类似windows ...

  8. Android - NullPointerException

    Android中的空指针,感觉出现率,比普通的java出现的概率多得多,今天我无意中发现的NullPointerException,还是想记录下来. 我们知道, 我们的控件一般定义在layout.xm ...

  9. jquery和js cookie的使用解析

    JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的.而cookie是运行在客户端的,所以可以用JS来设置cookie. 在这里分别通过 ...

  10. 第一章JSP基础语法

    jsp页面元素构成 jsp页面组成部分有:指令,注释,静态内容,表达式,小脚本,声明. jsp指令 page指令:通常位于jsp页面的顶端,同一个页面可以有多个page指令 include指令:将一个 ...