<!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. 备战“软考”之软件project

    说到"软件project"就有一种非常纠结的感觉!为什么呢?由于刚进入软考复习阶段,大家都把它放到了"比較"次要的地位,由于已经学过两遍,再加上它没有非常难理解 ...

  2. 24小时学通LINUX内核系列

    http://www.cnblogs.com/lihuidashen/category/667475.html

  3. SQL Server 优化器+SQL 基础

    http://www.cnblogs.com/shanksgao/tag/%E4%BC%98%E5%8C%96%E5%99%A8/ http://www.cnblogs.com/double-K/ca ...

  4. 【转】iOS应用崩溃日志揭秘2

    这篇文章还可以在这里找到 英语 场景 4: 吃棒棒糖时闪退! 用户邮件说, "当rage master吃棒棒糖时应用就闪退-" 另一用户说, "我让rage master ...

  5. Debian 8 编译安装nginx 1.8

    1.安装编译环境 apt-get install build-essential apt-get install gcc make apt-get install libpcre+* apt-get ...

  6. JDK自带方法实现消息摘要运算

    啊,有点小注释,懒得介绍了,就贴个代码吧,大意理解就可以了. package jdbc.pro.lin; import java.security.InvalidKeyException; impor ...

  7. HDU-1015（暴力）

    Safecracker Problem Description === Op tech briefing, 2002/11/02 06:42 CST === "The item is loc ...

  8. Android本地JUnit Text

    Android本地JUnit Text 步骤 创建一个和source文件,里面添加和src目录相同的包. 在AndroidManifest.xml文件manifest根节点添加如下文件 <ins ...

  9. 分享一张oracle scan图

  10. ios7 苹果原生二维码扫描（和微信类似）

    在ios7苹果推出了二维码扫描,以前想要做二维码扫描,只能通过第三方ZBar与ZXing. ZBar在扫描的灵敏度上,和内存的使用上相对于ZXing上都是较优的,但是对于 “圆角二维码” 的扫描确很困 ...