<!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. Netty入门(十)解码分隔符和基于长度的协议

    我们需要区分不同帧的首尾,通常需要在结尾设定特定分隔符或者在首部添加长度字段,分别称为分隔符协议和基于长度的协议,本节讲解 Netty 如何解码这些协议. 一.分隔符协议 Netty 附带的解码器可以 ...

  2. [Usaco2007 Jan]Balanced Lineup

    嘟嘟嘟 一道RMQ板子题,分别维护最大值和最小值,不解释. #include<cstdio> #include<iostream> #include<algorithm& ...

  3. [转]VS2013+简单稀疏光束调整库SSBA配置(64位编译)

    有关SSBA库的资源比较少,我是在Github上搜索下载的,具体的GitHub官方下载地址为:SSBA 下载后在SSBA解压文件夹下新建文件夹build. 打开cmake gui,在source co ...

  4. Python2.7-collections

    collections 模块主要提供了五种特殊类型容器,此外还提供了许多抽象基类用于检查类的接口 1.Counter 对象,主要用于统计出现次数,是dict的一个子类,用法与形式和 dict 很类似 ...

  5. android asmack调用MultiUserChat.getHostedRooms方法出现空指针的异常解决方案

    今天在做即时通讯群聊时,调用MultiUserChat.getHostedRooms(conn, SmackTools.getInstance().conn.getServiceName());方法获 ...

  6. 微信小程序开发 [07] 写在后面的话

    写在后面的话基本算是吐槽了,在学完小程序的课程之后,我用博客园的api,写了个闪存的小程序,本来兴致勃勃甚至这篇是准备写"我的第一个小程序发布啦",然而并没有. 不是说我偷懒了没写 ...

  7. 人的一生为什么要努力 &1

    2018-06-25

  8. 20155234《网路对抗》Exp9 WEB安全基础

    20155234 Exp9 Web安全基础 基础问答 SQL注入攻击原理,如何防御? SQL注入攻击就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意 ...

  9. Python基础(字符串和编码)

    字符编码 我们已经讲过了,字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特 ...

  10. python 井字棋(Tic Tac Toe)

    说明 用python实现了井字棋,整个框架是本人自己构思的,自认为比较满意.另外,90%+的代码也是本人逐字逐句敲的. minimax算法还没完全理解,所以参考了这里的代码,并作了修改. 特点 可以选 ...