<!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. linux 的常用命令---------第十阶段

    虚拟机三种网络模式 相同模式下的各个虚拟机之间都可以通信----两台虚拟机若都是 nat模式 或 桥接模式 或 仅主机模式,则这两台虚拟机之间是可以通信的. 桥接模式: (配置桥接模式的虚拟机可作为独 ...

  2. OpenCV——创建Mat对象、格式化输出、常用数据结构和函数（point，vector、Scalar、Size、Rect、cvtColor）

    创建Mat对象:

  3. SQL实用札记【SQL Sever篇】

    目录 从表中去除重复行 逗号分隔字符串转数据表行 跨DB/Server执行SP[分布式事务] 在OpenQuery中执行带参数的SQL语句 从表中去除重复行数据 1. 如果有ID字段,就是具有唯一性的 ...

  4. ssh推送.py程序到服务器端运行

    C:\Users\jiangshan>ssh jiangshan@192.168.1.191jiangshan@192.168.1.191's password:Last login: Sun ...

  5. Android-ProgressDialog点击对话框外部是不让其消失

    1)ProgressDialog.setCanceledOnTouchOutside(false); 调用这个方法时,按对话框以外的地方不起作用.按返回键还起作用 2)ProgressDialog.s ...

  6. tar 压缩 解压 打包命令

    01-.tar格式 解包:[*******]$ tar xvf FileName.tar 打包:[*******]$ tar cvf FileName.tar DirName(注:tar是打包,不是压 ...

  7. TensorFlow入门

    Win10下pycharm安装tensorflow: 1.安装git,这样就会有windows powerShell 2.安装python3.x,配置环境变量 3.安装pip,下载地址是:https: ...

  8. odoo之可选择多个内容显示问题

    <field name="partner_id" widget="many2many_tags" options="{'no_create': ...

  9. 【小程序】text-indent设置

    要想文本首行缩进,则需要设置以下 1. 文本以<view>标签包裹 (可选) 2. 该标签设置margin值 3.以上设置text-indent才会成功

  10. [Oracle]OpenVMS 运行 Oracle 时的推荐值

    PQL Parameters            ORACLE Account  ------------------        -------------------------  PQL_M ...