<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--景深的作用：

            是一个作用于z轴的属性

            1、让3D场景有近大远小的效果（就是肉眼距离屏幕的距离）

            2、是一个不可以继承的。但他可以作用于后代元素（不是作用于本身的）

            原理：

            景深越大，灭点越远，元素变形更小

            景深越小，灭点越近，元素变形更大

            灭点：灭点就是你看到的尽头

            景深基点：视角的位置 perspective-origin 50% 50% 参照盒模型

            组合变换的话，放本身的话，一定要放在首位，就是组合的话就不需要在祖先元素定义了

            transform-style

                营造有层级的3d舞台

                    是一个不可继承属性，他作用于子元素

            景深是会叠加的，就是因为是作用于后代元素的，所以祖先元素都会产生叠加

        -->

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            #wrap{

                width: 400px;

                height: 400px;

                position: absolute;

                top: 50%;

                left: 50%;

                margin-left: -200px;

                margin-top: -200px;

                border: 1px solid black;

                transform-style: preserve-3d;

                perspective-origin: ;

            }

            #inner{

                width: 200px;

                height: 200px;

                position: absolute;

                top: 50%;

                left: 50%;

                margin-left: -100px;

                margin-top: -100px;

                border: 1px solid pink;

                border-radius: 50%;

                text-align: center;

                line-height: 200px;

                font-weight: bold;

                transition: 2s;

                transform: rotateX(120deg) translateZ(100px);

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <div id="inner">

                Rainbow

            </div>

        </div>

    </body>

</html>

3D舞台实现的更多相关文章

  1. CSS3特效----制作3D旋转导航

    大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...

  2. 【css】3d导航效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. css3中做3D导航栏

    看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...

  4. 生成3D多棱柱的方法（3D立体图片）

    先上一个效果图 主要运用的技术点就是 确认基点,确认每个盒子旋转的度数 3D变换  transform: rotateY(-360deg); 景深  perspective 3D舞台 transfor ...

  5. transform的2D和3D变换

    transform取值 none:默认值,即是无转换 matrix(,,,,,): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f] ...

  6. 利用CSS3D效果制作简易旋转木马效果

    最近看一下css3d的一些特性,想着也实验学习一下,制作个小demo之类的.就练习了一下.开发一个粗糙的选择木马效果,如图 其实就是找到角度和位置,计算每根柱子的旋转角度摆放到3d空间的置顶位置即可. ...

  7. css3d总结

    3d舞台 设置 perspective(景深): length, 可以设置overflow:hidden 3d舞台下 -> 3d元素容器  设置 transform-style: preserv ...

  8. Stage3D学习笔记（四）：正交矩阵

    我们上一章节显示图片的时候,会发现我们制定的顶点在Stage3D中其实是存在一个区间的: x轴(从左到右):[-1.0-1.0] y轴(从下到上):[-1.0-1.0] z轴(从近到远):[0-1.0 ...

  9. Stage3D学习笔记（三）：使用GPU绘制一个图片

    首先准备我们需要的图片,尺寸必须是2的幂数,我修改了一下Starling的图标拿来用: 还是先看看最终效果: 代码是居于上一节的代码进行修改的: package { import com.adobe. ...

随机推荐

  1. JVM系列三:JVM参数设置

    JVM系列三:JVM参数设置.分析   不管是YGC还是Full GC,GC过程中都会对导致程序运行中中断,正确的选择不同的GC策略,调整JVM.GC的参数,可以极大的减少由于GC工作,而导致的程序运 ...

  2. C#控件中的KeyDown、KeyPress 与 KeyUp事件浅谈

    研究了一下KeyDown,KeyPress 和 KeyUp 的学问.让我们带着如下问题来说明: 1.这三个事件的顺序是怎么样的? 2.KeyDown 触发后,KeyUp是不是一定触发? 3.三个事件的 ...

  3. auto关键字使用

    auto类型变量--根据初始值推断真实的数据类型. 有些时候并不能很确定一个变量应该具备的数据类型,例如:将一个复杂表达式的值赋给某个变量,此时并不能很明显的确定这个值所具备的数据类型.此时auto关 ...

  4. 关于Altium Designer 提示发送错误报告解决方法

    提示是这样子,,,,,, 稍微有点问题就提示,,,复制也提示,,,,移动也提示,,,,,,算是服了这个软件了.......真是忍无可忍,那就无需再忍,解决掉 以前是安装上一个虚拟的打印机就好了,,,其 ...

  5. Features + Git + Drush，打造你的Drupal开发与维护标准工作流

    还在为如何将本地的开发工作如何部署到生产环境而皱眉头?本文以实战历程教你如何一步步将你的工作成果从开发环境部署到生产环境. 如题所示,需要用到Features, Git, Drush:如果你还不知道他 ...

  6. 第39章 ETH—Lwip以太网通信

    第39章     ETH—Lwip以太网通信 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/ ...

  7. Elasticsearch 简介

    1. 背景 Elasticsearch 在公司的使用越来越广,很多同事之前并没有接触过 Elasticsearch,所以,最近在公司准备了一次关于 Elasticsearch 的分享,整理成此文.此文 ...

  8. Android下so注入汇总

    /**  作者:蟑螂一号*  原文链接:http://www.sanwho.com/133.html*  转载请注明出处*/ Android下so注入是基于ptrace系统调用,因此要想学会andro ...

  9. 使用selenium进行自动化测试

    selenium 支持多个客户端:ruby,Java,python.可以用来对网页进行全面测试,支持真实浏览器测试. firefox IE chrome safari 支持多操作系统: Linux w ...

  10. WFP page navigator control

    WPF navigator UI: <Grid x:Class="WpfApplication2.PagerNav" xmlns="http://schemas.m ...