<!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. linux 启动流程图

    http://blog.163.com/x_ares/blog/static/101548562011710112613165/ http://baogf92.blog.51cto.com/10869 ...

  2. 转：Myeclipse连接MySQL数据库经验分享

    要使除 JDBC ODBC Bridge 之外的 Driver 生效,需要手动配置. 首先获得 MySQL Connector / J 的 jar : http://dev.mysql.com/dow ...

  3. 基于Qt的第三方库和控件

    ====================== 基于Qt的第三方库和控件 ======================     libQxt --------   http://dev.libqxt.o ...

  4. verview of Spring Framework--转

    http://docs.spring.io/spring/docs/current/spring-framework-reference/html/overview.html 2. Introduct ...

  5. eclipse快速查找一个变量、方法或者类被引用的地方

    最近不停debug,拿到一个变量之后总是要先概览一下才好下手,之前一直用Ctrl+F来做,太麻烦.今天查了下eclipse使用,发现有快捷键,使用方法: 先双击要查看的变量.方法或者类,使之被选中,然 ...

  6. System Operations on AWS - Lab 5W - Managing Resources (Windows)

    登陆到CommandHost实例,通过AWS CLI来管理各个资源 1. 通过Tags来管理资源 1.1 登陆到CommandHost实例 1.2 找出development实例 1.2.1 打开Po ...

  7. Tomcat 的 SSL 配置

    本教程使用 JDK 6 和 Tomcat 7,其他版本类似. 基本步骤: 使用 java 创建一个 keystore 文件 配置 Tomcat 以使用该 keystore 文件 测试 配置应用以便使用 ...

  8. CSS排版页面

    创建CSS文件如下: @charset "utf-8"; /* CSS Document */ *{ margin:0px; padding:0px; border:0px; } ...

  9. centos 彻底卸载mysql

    yum remove mysql mysql-server mysql-libs compat-mysql51rm -rf /var/lib/mysqlrm /etc/my.cnf查看是否还有mysq ...

  10. Android增加监听的三种实现方式

    在Android中,为一个按钮增加监听的方式有五种 1.匿名内部类 @Override protected void onCreate(Bundle savedInstanceState) { sup ...