本文引自:http://blog.csdn.net/cddcj/article/details/52956540

perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大,而z<0时则比正常小,大小程度由该属性的值决定。

三维元素在观察者后面的部分不会绘制出来,即z轴坐标值大于perspective属性值的部分。

默认情况下,消失点位于元素的中心,但是可以通过设置perspective-origin属性来改变其位置。

属性值为0或负值或none(none是默认值)时,没有透视效果。

----------------------------------------------------------------------------------------------------------------------------

CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持,IE10支持。

只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法比较简单:

  1. 只能选择透视方式,也就是近大远小的显示方式。
  2. 镜头方向只能是平行Z轴向屏幕内,也就是从屏幕正前方向里看。
  3. 可以调整镜头与平面位置:
  • a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示,镜头距离元素表面的位置是300像素。
  • b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。

下面用一个正方体(或者说骰子)向大家演示视角不同视角(perspective 以及 )的差别。

镜头距离z=0平面的不同距离的效果。

        
         镜头在z坐标固定时,x和y坐标(perspective-origin)变化时的差别。
       
 
 
总结:perspective的意义在于设置远近点大小的比例,让它产生3D感,但是并不改变物体在transform-origin处的大小。

CSS3: perspective 3D属性的更多相关文章

  1. css3的3d属性集合

    css3的3d属性集合 想进入css3的3d世界必须知道一下几个属性及其用法. 当然在进入属性介绍之前我想你必须知道3维坐标,附上一张经典图如下: 我想不用解释了吧.之后要平移和旋转都是在这个基础之上 ...

  2. css3 perspective perspective-origin属性的理解

    perspective字面意思是:透视. 在w3school中它的解释为:设置元素被查看位置的视图:通俗讲,就是我们看看一个物体的所处的视角,近大远小.就比如我们正对着电脑:当我无限贴近电脑屏幕的时候 ...

  3. 吃透css3之3d属性--perspective和transform

    本文为原创,转载请注明出处: cnzt 写在前面:最近写了个3d轮播效果图,在此将思路和过程中遇到的问题都记录下来. 首先,我们下来了解一下perspective和transform都是做什么的. t ...

  4. CSS3 《3D骰子 压大小》

    游戏在线预览地址:http://dtdxrk.github.io/game/3d-dice/index.html js判断一个随机数大小的游戏. 本来想用canvas做的,平面的生产一个点数,感觉没啥 ...

  5. HTML5培训入门基础知识了解CSS3 3D属性

    CSS3 3D 什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向 CSS3中的 ...

  6. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  7. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  8. 使用CSS3实现3D图片滑块效果

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  9. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

随机推荐

  1. (转)VSCode调试go语言出现:exec: "gcc": executable file not found in %PATH%

    原文:https://www.cnblogs.com/zsy/p/5958170.html 1.问题描述 由于安装VS15 Preview 5,搞的系统由重新安装一次:在用vscdoe编译go语言时, ...

  2. 给即将或刚进入it行业的朋友的参考--体育生转行到Java的经历

    首先声明,不喜勿喷我这个历经千辛万苦转入Java行业的人.相信很多正在学校中迷茫和在毕业后对于现状不满意的朋友通过各种的渠道进行信息汇总,了解了软件行业的高工资和多机会,正摩拳擦掌准备在这个领域大干一 ...

  3. CDQZ集训DAY6 日记

    又炸了. 早上起来其他竞赛生也走了,食堂做饭做的挺潦草,但为什么四川烧麦的馅是米啊??!! 起来看题总觉得都似曾相识.第一题打完40分暴力后想拿莫队搞到70分,但发现能想到的莫队维护都是nsqrt(n ...

  4. ASP.NET MVC ActionFilterAttribute 方法解释(区别)

    1.OnActionExecuting        在Action方法调用前使用,使用场景:如何验证登录等. 2.OnActionExecuted      在Action方法调用后,result方 ...

  5. Code Review最佳实践

    我一直认为Code Review(代码审查)是软件开发中的最佳实践之一,可以有效提高整体代码质量,及时发现代码中可能存在的问题.包括像Google.微软这些公司,Code Review都是基本要求,代 ...

  6. 使用java语言基于SMTP协议手写邮件客户端

    使用java语言基于SMTP协议手写邮件客户端 1. 说明 电子邮件是互联网上常见的应用,他是互联网早期的产品,直至今日依然受到广大用户的喜爱(在中国可能因为文化背景不同,电子邮件只在办公的时候常用) ...

  7. Excel催化剂开源第47波-Excel与PowerBIDeskTop互通互联之第一篇

    当国外都在追求软件开源,并且在GitHub等平台上产生了大量优质的开源代码时,但在国内却在刮着一股收割小白智商税的知识付费热潮,实在可悲. 互联网的精神乃是分享,让分享带来更多人的受益. 在Power ...

  8. 人民网基于FISCO BCOS区块链技术推出“人民版权”平台

    FISCO BCOS是完全开源的联盟区块链底层技术平台,由金融区块链合作联盟(深圳)(简称金链盟)成立开源工作组通力打造.开源工作组成员包括博彦科技.华为.深证通.神州数码.四方精创.腾讯.微众银行. ...

  9. C++ Primer 第五版 一些遇到的注意点记录。

    第8章 8.2 p283 示例里有一句 ostream *old_tie = cin.tie(nullptr);//old_tie指向当前关联到cin的流 一开始不理解为什么不是无关联,查过tie() ...

  10. SpringBoot系列——@Async优雅的异步调用

    前言 众所周知,java的代码是同步顺序执行,当我们需要执行异步操作时我们需要创建一个新线程去执行,以往我们是这样操作的: /** * 任务类 */ class Task implements Run ...