<!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. Quartz定时任务学习（四）调度器

    org.quartz.Scheduler 类层次 作为一个 Quartz 用户,你要与实现了 org.quartz.Scheduler 接口的类交互.在你调用它的任何 API 之前,你需要知道如何创建 ...

  2. c pointer and array

    Pointer:  A pointer is a variable that contains the address of a variable. if c is a char and p is a ...

  3. leetcode__Convert Sorted List to Binary Search Tree

    Convert Sorted List to Binary Search Tree Total Accepted: 12283 Total Submissions: 45910My Submissio ...

  4. 动态规划入门——Eddy's research II

    转载请注明出处:http://blog.csdn.net/a1dark 分析:找规律 #include<stdio.h> int main(){ int m,n; while(scanf( ...

  5. mongodb 学习笔记 09 -- shard分片

    概述 shard 分片 就是 把不同的数据分在不同的server 模型 当中:     用户对mongodb的操作都是向mongs请求的     configsvr 用于保存,某条数据保存在哪个sha ...

  6. /dev/tty 与 /dev/pts

     打开3个bash会话窗口  [root@server1 fd]# cd /proc/7489/fd[root@server1 fd]# ll总用量 0lrwx------ 1 root root 6 ...

  7. show()与showDialog()的区别

    A.WinForm中窗体显示  显示窗体可以有以下2种方法:  Form.ShowDialog方法 (窗体显示为模式窗体) Form.Show方法 (窗体显示为无模式窗体) 2者具体区别如下: 1.在 ...

  8. LabVIEW系列——自定义错误

    1.自定义错误代码文本文件在labview中三处:      a).E:\Program Files\National Instruments\LabVIEW 8.6\project\errors   ...

  9. AES加解密【示例】

    代码 /**  * AES算法加密.JRE默认只能用16个字节(128)位密钥  */ public class AESUtils {     //使用指定转换的 Cipher 对象     publ ...

  10. Android 读取txt文件并以utf-8格式转换成字符串

    博客: 安卓之家 微博: 追风917 CSDN: 蒋朋的家 简书: 追风917 博客园: 追风917 # 使用EncodingUtils 今天用到了城市选择三级联动的库,用的这个:https://gi ...