第99天:CSS3中透视perspective
CSS3中透视perspective
- 透视原理: 近大远小 。
- 浏览器透视:把近大远小的所有图像,透视在屏幕上。
- 理解浏览器的坐标系:浏览器平面为 Z=0的平面,坐标原点默认为图片的中心,可以通过更改透视原点进行更改。
- perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置。
- perspectiveOrigin: 个人理解为视点的xy坐标,perspective则是z坐标,三者可以再三维中确定 视点的唯一位置。
浏览器透视原理图
当元素向后移动的时候,透视点与元素所处位置的连线和屏幕的焦点,就是元素在屏幕上的投影。与原来的头像大小相比变小了。
与之前的过程相同,视点与移动后的元素的连线与屏幕的焦点就是在屏幕上的呈现的元素的大小,与元素相比较变大了。
上图截取的是X=0平面,可以从图中看到视点对图像高度投影的影响,由于视点原点的变化导致视点和最高点最低点的角度发上变化,在屏幕上的投影出现了偏移,对于宽度的影响是相同的,图像的轮廓也就从一定程度上表现了图像每一个像素的变化。
通过原理图理解规律
当元素沿着Z轴向前移动的时候,与视点的距离越小,视点和元素的最高点和最低点所称角度最大,放大倍数越大。总结:视距越小放大效果越明显,translateZ越大放大效果越明显。
当元素沿着Z轴移动的距离大于视距后。元素移动到视点后方,固无法投影在屏幕上,所以屏幕上没有呈现。translateZ>perspective 屏幕上无法呈现图像。
perspective 使用方法
perspective 的使用有多种情景,大家可以了解过后按需选择自己所需要。
使用在父元素还是子元素
其中使用 不同元素作为视角对象的过程,就是把perspective属性加在不同的元素上。
仔细观看以舞台作为视角对象时,子元素不仅呈现图像不同,而且还会消失。原因如下图截取Y=0平面 ,及浏览器的俯视图,视点在浏览器前方,元素现在在Z=0平面上,集成现在浏览器上,视点和元素不同部位的连线,就是我们的视线,当元素中子元素的旋转角度与该视线重合,由于其没有宽度 我们就看不见这个子元素了。
书写方式不同的定义
perspective有两种定义方式,如下
.class{
perspective: 800px;
}
.class{
transform: prespective(800px)
}
个人关于两种书写方式的不同的理解是,单独定义的perspective只在初次渲染时,投影在屏幕上。 写在transform中的perspective会根据transform动画的变化来进行重新的渲染。所以当使用js或Css3进行动画时,尽量选择后一种定义方式。
使用的注意事项
perspective的定义要在其他3d变幻之前,否则无效 如translateZ等,这个也很好理解,要首先确定眼睛所在的位置,在屏幕上的成像才会有此计算。
呈现3d效果的父元素要添加transform-style:preserver-3d属性。该属性定义该元素的子元素按照3d效果来呈现。
backface-visibility 用来定义元素不是正面朝向视点时的可视情况 。
第99天:CSS3中透视perspective的更多相关文章
- CSS3 03. 3D变换、坐标系、透视perspective、transformZ、transform-style添加3D效果、backface-visibility元素背面可见、动画animation、@keyfarmes、多列布局
1.左手坐标系 伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指.食指和中指分别代表X.Y.Z轴的正方向.如下图 CSS中的3D坐标系 CSS ...
- CSS3 3D变形 transform---rotateX(), rotateY(), rotateZ(), 透视(perspective)
2d x y 3d x y z 左手坐标系 伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指.食指和中指分别代表X.Y.Z轴的正方向.如下图 ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- CSS3中新出现的技术
CSS3中新出现的技术 CSS媒体查询 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定 ...
- CSS3中的3D动画实现(钟摆、魔方)--实现代码
CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性 all|[attr] transition-duration 过渡时间 transition-delay ...
- CSS之透视perspective属性
透视原理: 近大远小 . 浏览器透视:把近大远小的所有图像,透视在屏幕上. 书写方式不同的定义 perspective有两种定义方式,如下 .class{ perspective: 800px; } ...
- CSS3中的新特性
一.CSS3新属性 CSS3还不属于W3C标准,所以不同浏览器的支持程度也不相同,对于不同浏览器,写法也不同,不同内核的浏览器要加不同的前缀,如下: transform:rotate(9deg); - ...
- CSS3中2D/3D转换、过渡、动画
转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...
- CSS3中的变形处理
在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...
随机推荐
- # 第五周课下测试(ch03)补交
第五周课下测试(ch03)补交 1.( 多选题 | 1 分) 有关gdb调试汇编,下面说法正确的是() A . 可以用disas反汇编当前函数 B . 以16进制形式打印%rax中内容的命令是 pri ...
- 20145209 2016-2017-2 《Java程序设计》课程总结
20145209 2016-2017-2 <Java程序设计>课程总结 每周作业链接汇总 预备作业01 http://www.cnblogs.com/liuyiyang/p/6194319 ...
- js获取IE版本,while代码很特别
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 记boost在gcc的一个库链接问题generic_category()
报错大致如下: main.cpp:(.text+0x49): undefined reference to `boost::system::generic_category()'main.cpp:(. ...
- pyqt5 菜单,工具栏,线程,matplotlib
import sys from PyQt5.QtGui import QIcon from PyQt5.QtWidgets import QMainWindow, QMenuBar, QToolBar ...
- 【LG4317】花神的数论题
[LG4317]花神的数论题 题面 洛谷 题解 设\(f_{i,up,tmp,d}\)表示当前在第\(i\)位,是否卡上界,有\(tmp\)个一,目标是几个一的方案数 最后将所有\(d\)固定,套数位 ...
- CF 987 D. Fair
D. Fair http://codeforces.com/contest/987/problem/D 题意: n个城镇m条道路,(保证没有重边,两个城镇间可以到达),每个城镇拥有的特产ai(可能多个 ...
- cogs2223 [SDOI2016 Round1] 生成魔咒
cogs2223 [SDOI2016 Round1] 生成魔咒 原题链接 题解 暴力:每次更新后缀数组??? set+二分+hash暴力 http://paste.ubuntu.com/2549629 ...
- set get方法诡异的空指针异常
发现原来是我的bean没有实例化 我的一直都是这么实例化的: UserEntity userEntity = null;难怪每次用不了set方法 原来是没有实例化 实例化之后就能正常使用了 UserE ...
- [备忘]Windows Server 2008 R2部署FTP FileZilla Server防火墙设置
有一台服务器,之前文件迁移少,现准备用FileZilla Server当FTP服务器,服务器系统是Windows Server 2008 R2,同样适用FileZilla Client连接服务器FTP ...