<!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. AddHandler php5-script .php\AddType text/html .php和AddType application/x-httpd-php .php的区别？

    让apache支持php文件的解释,有2种方法配置,RPM装的默认配置是:AddHandler php5-script .phpAddType text/html .php网上很多人的配置方法是:Ad ...

  2. 抽象类、final关键字、多态

    1.1 抽象类 1.1.1 抽象类概念 C extends B,B extends A,在继承过程中,形成一个继承金字塔,位于金字塔底部的类越来越具体(强大),位于塔顶的越来越抽象(简单). 例如:人 ...

  3. vagrant特性——基于docker开发环境（docker和vagrant的结合）-2-命令

    Docker Commands Docker provider公开了一些额外的vagrant命令,这些命令对于与Docker容器交互非常有用.这有助于你在vagrant之上的工作流程,这样你就可以在底 ...

  4. mysql数据库创建和权限分配

    查询安装路径: whereis mysql连接mysql: mysql -u root -p第一步:创建用户CREATE USER 'claim_prod'@'%' IDENTIFIED BY 'Pa ...

  5. C++之数据类型

    C++语言是广泛使用的程序设计语言之一,因其特有的优势在计算机应用领域占有重要一席. C++中的数据类型 C++中的数据类型分为两大类:基本数据类型和非基本数据类型,如图1.1所示. 图1.1 C++ ...

  6. [Lydsy1805月赛]quailty 算法 BZOJ5362

    分析: 题目中描述了一个二分图,让我们求最小权最大匹配,实际上其实是求n个点,在n*(n-1)/2中选n条边的权值和最小,形成一个每个点都有出边的体系,也就是基环树,(证明:因为我们需要二分图最大匹配 ...

  7. Delphi DBGrid类控件定位到某一行，并更改为选中状态。

    Delphi中,可以使用数据集控件提供的 Locate 成员方法快速定位至某条记录, 然后通过清除数据集控件的选中状态,并重新赋值达到我们的目的. grDirectory.DataSource.Dat ...

  8. kettle学习笔记（六）——kettle转换步骤

    一.概述 转换步骤分类: 1. 增加新的列 2. 字符串处理 3. 行列变换 4. 排序/排重/字段选择 5. 其他转换步骤 二.增加新的列 1.增加常量列 增加一列常量的列 其它增加列的操作大同小异 ...

  9. POJ1159

    这竟然是IOI虽然是2000年的,但其实也改变不了它水题的本质 我写了两种方法,这里都讲一下吧 考虑记忆化搜索,用f[i][j]表示当区间的左端为i,右端为j时最少要添加多少字符,所以ans就为f[1 ...

  10. Luogu P4071 [SDOI2016]排列计数

    晚上XZTdalao给我推荐了这道数论题.太棒了又可以A一道省选题了 其实这道题也就考一个错排公式+组合数+乘法逆元 我们来一步一步分析 错排公式 通俗的说就是把n个1~n的数排成一个序列A,并使得所 ...