<!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. 【洛谷】【单调栈】P1823 音乐会的等待

    [题目描述:] N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人.队列中任意两个人A和B,如果他们是相邻或他们之间没有人比A或B高,那么他们是可以互相看得见 ...

  2. tomcat Win10 配置环境变量详解

    在Win10系统总该如何配偶之tomcat 环境变量?今天win10之家给大家带来了关于win10系统中配置tomcat环境的操作方法.在配置之前我们需要做以下几点: 步骤:安装和配置好了Java 的 ...

  3. 【转】头部属性 Meta http-equiv 大全

    http-equiv类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容.常用的http-equiv类型有: 1.Content-Type和Content-Langu ...

  4. PHP foreach 循环使用"&$val" 地址符“&”

    在熟悉项目代码的时候 看到这样的foreach 循环: foreach($data as &$val){ .... } 第一次看到循环里面使用了地址符“&”,我印象中的这个符号 是直接 ...

  5. java字符串利用dom4j转 xml 且遍历

    1.因为转换的格式不是标准格式,所以有时候获得xml根目录后rootElement.attributes() 取不到想要的属性 所以需要通过迭代器来获取想要的值 public static void ...

  6. switchable图片切换

    前提: 最近由于项目的需要jquery "switchable图片切换"效果 所以趁着周末有空时间研究下 ,以前工作都依赖于kissy框架,所以也没有综合的写过类似的,如下图所示效 ...

  7. Java使用PropertyDescriptor获取实体类中私有属性的值，并给私有属性赋值

    大家都知道Java类中的私有的(private)属性是获取不到的(即使使用继承依然获取不到),那如果非要获取私有属性的值怎么办呢?一般的做法是将该java类封装称为一个JavaBean,即封装该私有属 ...

  8. day44

    今日内容: 1.前端概述 2.前端三剑客 3.页面基本结构 4.常用标签 5.标签分类 1.前端概述与前端三剑客 前端即⽹站前台部分,运⾏在PC端,移动端等浏览器上展现给⽤户浏览的⽹⻚.随着互联⽹技术 ...

  9. Docker的Mysql数据库:把数据存储在本地目录

    Docker mysql 把数据存储在本地目录,很简单,只需要映射本地目录到容器即可 1.加上-v参数 $ docker run -d -e MYSQL_ROOT_PASSWORD=admin --n ...

  10. 20155301 Exp9 Web安全基础

    20155301 Exp9 Web安全基础 1.实验后回答问题 (1)SQL注入攻击原理,如何防御 答 :原理: 利用现有应用程序,将恶意的SQL命令注入到后台数据库引擎执行的能力,它可以通过在Web ...