<!DOCTYPE html>

<html>

    <head>

        <!--

            backface-visibility属性用来设置，是否显示元素的背面，默认是显示的

            backface-visibility:keyword;

            keyword有两个值，hidden和visible，默认是是visible

            所以是在每个元素里面设置的

        -->

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                padding: 0;

                margin: 0;

            }

            #wrap{

                position: absolute;

                left: 50%;

                top: 50%;

                width: 400px;

                height: 400px;

                margin-left: -200px;

                margin-top: -200px;

                border: 1px solid;

                perspective: 200px;

                background: url(3.jpg) no-repeat;

                background-size:100% 100%;

            }

            #wrap > .box{

                width: 100px;

                height: 100px;

                position: absolute;

                left: 0;

                top: 0;

                right: 0;

                bottom: 0;

                margin: auto;

                transform-style: preserve-3d;

                transition: 3s;

                transform-origin: center center 50%;

            }

            #wrap > .box > div{

                position: absolute;

                width: 100px;

                height: 100px;

                background: rgba(123,321,333,.3);

                text-align: center;

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

                backface-visibility: hidden;

            }

            #wrap > .box >div:nth-child(5){

                 top: -100px;

                 transform-origin: bottom;

                 transform: rotateX(90deg);

            }

            #wrap > .box >div:nth-child(6){

                 bottom: -100px;

                 transform-origin: top;

                 transform: rotateX(-90deg);

            }

            #wrap > .box >div:nth-child(3){

                 left: -100px;

                 transform-origin: right;

                 transform: rotateY(-90deg);

            }

            #wrap > .box >div:nth-child(4){

                 right: -100px;

                 transform-origin: left;

                 transform: rotateY(90deg);

            }

            #wrap > .box >div:nth-child(2){

                 transform:   translateZ(-100px) rotateX(180deg);

            }

            #wrap > .box >div:nth-child(1){

                 z-index: 1;

            }

            #wrap:hover .box{

                transform: rotate3d(1,1,1,180deg);

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <div class="box">

                <div>前</div>

                <div>后</div>

                <div>左</div>

                <div>右</div>

                <div>上</div>

                <div>下</div>

            </div>

        </div>

    </body>

</html>

3D 立体 backface-visibility的更多相关文章

  1. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

  2. 3D立体照片墙

    代码如下:   <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  3. js矩阵菜单或3D立体预览图片效果

    js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...

  4. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

  5. jquery环形3D立体旋转特效

      jquery环形3D立体旋转特效 作者/代码整理:站长素材  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载)发布日期:2013-07-20   立体效果比较强的jquery特效,周围小图组 ...

  6. Unity3D实现3D立体游戏原理及过程

    Unity3D实现3D立体游戏原理及过程 183 0 0     下面的教程是我今天整理的资料,教大家一步步完成自己的3D立体游戏,并向大家介绍一些3D成像的原理.     理论上,每个普通的非立体3 ...

  7. NVIDIA® Quadro® 四路缓冲 3D立体方案

    http://www.nvidia.cn/object/quadro_pro_graphics_boards_cn.html NVIDIA® Quadro® 专业显卡让地球学家以及时装设计师等许多专业 ...

  8. 新版蜀山剑侠传3D立体格斗全方位剖析

    国人终极格斗<蜀山剑侠传>,突破传统横版格斗"二次元"瓶颈,率先开辟3D立体横版格斗网游先河,实现"有纬度"的空间化立体式全景3D战斗体验!游戏大量 ...

  9. CorelDRAW X8制作金属质感3D立体按钮

    本教程教您使用CorelDRAW X8制作金属质感3D立体按钮.绘图中主要应用渐变填充技巧为立体按钮表现物体质感和丰富的色彩变化,最后实现的效果也是不错的,是很实用的案例,教程难度一般,完成图如下: ...

  10. 3D立体菜单导航

    今天在微博里面看到别人分享的一个立体效果,我觉得挺好的,就拿下来自己存着,万一以后用到. 效果如下: index.html <!DOCTYPE html> <html > &l ...

随机推荐

  1. BZOJ3173:[TJOI2013]最长上升子序列(Splay)

    Description 给定一个序列,初始为空.现在我们将1到N的数字插入到序列中,每次将一个数字插入到一个特定的位置.每插入一个数字,我们都想知道此时最长上升子序列长度是多少? Input 第一行一 ...

  2. 宿主在Windows Service中的WCF(创建，安装，调用) (host到exe，非IIS)

    1. 创建WCF服务 在vs2010中创建WCF服务应用程序,会自动生成一个接口和一个实现类:(IService1和Service1) IService1接口如下:   using System.Ru ...

  3. Oracle 表删除操作

    删除表内容(dml):delete from 删除表结构(ddl):drop table xx 清空表(ddl):truncate table 清空整张表,不能回滚,不会产生大量日志文件: 表空间会得 ...

  4. easyui的datagrid

    datagrid数据的绑定方式: 1)data 后跟数据行的json串 2)url 后跟{"total":,"rows":,"foot":} ...

  5. php中经常使用的string函数

    strpos() ---返回字符串在另一字符串中首次出现的位置 strrpos() ---查找字符串在另一字符串中最后出现的位置 strchr()   ===  strstr()    ---找到字符 ...

  6. CAN2.0A 和CAN2.0B

    CAN2.0A 和CAN2.0B 原创 2015年08月03日 16:03:08 3969 CAN2.0A 是CAN协议的PART A部分,此部分定义了11bit的标识区 .CAN2.0B 是CAN协 ...

  7. Luence

    Luence 是Apache软件基金会的一个项目,是一个开发源码的全文检索引擎工具包,是一个全文检索引擎的一个架构.提供了完成的查询引擎和检索引擎,部分文本分析引擎. 全文检索程序库,虽然与搜索引擎相 ...

  8. ccf201703-1分蛋糕

    问题描述 小明今天生日,他有n块蛋糕要分给朋友们吃,这n块蛋糕(编号为1到n)的重量分别为a1, a2, …, an.小明想分给每个朋友至少重量为k的蛋糕.小明的朋友们已经排好队准备领蛋糕,对于每个朋 ...

  9. Patchwork（2013年）--CNV检测方法流程

    文章题目:Patchwork: allele-specific copy number analysis of whole-genome sequenced tumor tissue 特点: 可以检测 ...

  10. ORM框架-SQLAchemy使用

    一.ORM简介 orm英文全称object relational mapping,就是对象映射关系程序,简单来说我们类似python这种面向对象的程序来说一切皆对象,但是我们使用的数据库却都是关系型的 ...