<!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. 3.HBase In Action 第一章-HBase简介（1.1.1 大数据你好呀）

    Let's take a closer look at the term Big Data. To be honest, it's become something of a loaded term, ...

  2. [POI2007]MEG-Megalopolis

    传送门:嘟嘟嘟 第一反应是树链剖分,但是太长懒得写,然后就想出了一个很不错的做法. 想一下,如果我们改一条边,那么影响的只有他的子树,只要先搞一个dfs序,为什么搞出这个呢?因为有一个性质:一个节点的 ...

  3. 关于ip判断

    php正则实现ip段判断 $ip = '22.18.10.2'; $arrayip = array('123.12.*.*','22.18.10.*');//ip段 $ipregexp = implo ...

  4. Python中__init__()方法注意点

    此文转自https://www.cnblogs.com/zyxstar2003/archive/2011/03/21/1989954.html 1.__init__并不相当于C#中的构造函数,执行它的 ...

  5. nginx下No input file specified错误的解决

    在web服务的根目录下创建 .htaccess文件,设置一下内容: RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond % ...

  6. JAVA框架 Spring 调用jdbcsuport简化开发

    一)使用DAO的jdbcsuport来简化开发 首先来清楚一个概念: 我们在进行配置文件来进行依赖注入的时候,主要是通过set方法来进行设置的. 正常我们使用spring的jdbctemplate的时 ...

  7. 简单的django配置和命令

    1.创建项目:django-admin startproject 项目名称 2.进入项目:cd 项目名称 3.创建子应用:python manage.py startapp 子应用名称 4.把子应用添 ...

  8. 2017-2018-2 20155231《网络对抗技术》实验八： WEB基础实验

    2017-2018-2 20155231<网络对抗技术>实验八:Web基础 实验要求: Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与P ...

  9. [Oracle]坏块处理：确认坏块的对象

    如果已经知道 FILE#,BLOCK#,则 可以通过如下查询来看: SQL> SELECT SEGMENT_TYPE,OWNER||'.'||SEGMENT_NAME FROM DBA_EXTE ...

  10. Partition3：分区切换（Switch）

    在SQL Server中,对超级大表做数据归档,使用select和delete命令是十分耗费CPU时间和Disk空间的,SQL Server必须记录相应数量的事务日志,而使用switch操作归档分区表 ...