perspective 属性用于规定观察点距离元素的距离,

1 观察点距离元素越近,元素变形就越大,灭点距离越近。

2 观察点距离元素越远,元素变形越小,灭点距离也就越远。

比如设置perspective属性值为1200px,那么就是观察点距离元素的距离是1200px.需要注意的是,此值是给解析器看的,生成具有立体效果图形,而不是说让你距离屏幕1200px去观察;视点的位置可以结合perspective-origin属性进行调整;

perspective属性的使用还要有如下几点需要注意:

1此属性在舞台元素上设置,对进行3D变换的子元素生效;

2 如果子元素不是3D变换元素,那么没有任何效果。

3 与persperctive(n)作用相同;区别在于应用的元素对象不同,此元素直接应用于当前元素,perspectiive(n)应用于当前元素的舞台元素也就是当前元素的父元素;

使用perspective属性实现3D效果demo 见 css3 利用perspective实现翻页效果和正方体 以及翻转效果

css3 tranform perspective属性的更多相关文章

  1. 如何理解 css3 的 perspective 属性

    一.写在前面的话 最近想多了解一下CSS3的transform 3D效果,transform:英文直译就是转换,它可以实现旋转.缩放.位移等效果,听起来有没有觉得很酷的样子,狠狠的点这里来看看旋转和位 ...

  2. CSS3教程:Transform的perspective属性设置

    1 2   <div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(4 ...

  3. CSS3 Transform的perspective属性

    以下两行语句有什么区别? Css <div id="animateTest" style="-webkit-transform: perspective(400px ...

  4. CSS3: perspective 3D属性

    本文引自:http://blog.csdn.net/cddcj/article/details/52956540 perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产 ...

  5. CSS3 Tranform 3D 的应用

    CSS3 Tranform 3D 的应用 一.perspective 属性 1. 作用: 设置元素被查看位置的视图,类似于眼睛到屏幕的距离,一般跟 perspective-origin 共同作用在一个 ...

  6. Transform-style和Perspective属性

    transform-style属性 transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现.他主要有两个属性值:flat和preserve-3d. transfor ...

  7. css3 tranform  transition animation

    tranform:对象图形变形 tranform的属性包括:   1.none 表示不进行变换:   2.rotate 旋转            transform:rotate(20deg) 旋转 ...

  8. CSS3景深-perspective

    3D视图正方体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. css3的3d属性集合

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

随机推荐

  1. struts2 获取表单数据封装到list和map集合

    一.获取封装表单数据到list集合 示例 获取用户输入的用户名和密码并输出用户名. jsp页面 list[0]表示list中的第一个user对象 Java代码 二.封装表单数据到map集合 示例 获取 ...

  2. linux 中 用户管理 (composer 时不能root 遇到)

    linux 是支持多用户的,可以同时多个用户在线操作,这点与 Windows 不同. 在我们项目组 操作linux 服务器时,可进行多用户管理,并赋予不同权限,下面是我学习并用的比较频繁的命令: 1. ...

  3. ABAP 面向对象(Object Orientation) OO

    [转自 http://blog.sina.com.cn/s/blog_7c7b16000101bhof.html]在程序中, 对象的识别和寻址是通过对象引用来实现的, 对象引用变量可以访问对象的属性和 ...

  4. Ubuntu安装教程

    http://www.linuxdiyf.com/linux/13198.html 简易配置说明 磁盘分区,新分区的磁盘必须是未分配的, 到管理-磁盘管理下面查看磁盘是不是未分配的,如果已分配了,在磁 ...

  5. Flex自定义组件开发

    一般情况下需要组件重写都是由于以下2个原因:1.在FLEX已有组件无法满足业务需求,或是需要更改其可视化外观等特性时,直接进行继承扩展.2.为了模块化设计或进一步重用,需要对FLEX组件进行组合.而F ...

  6. 2018svn1

    Svn(Subversion) VisualSVN-Server是SVN的服务端.TortoiseSVN是客户端.D:\SVNRepositories是安装VisualSVN-Server时候选择的仓 ...

  7. DevExpress实用心得:XtraGridControl动态添加右键菜

    在使用GridControl的时候经常需要添加右键菜单. 一般的做法是自己创建菜单项,然后注册GridView的Mouse-Click事件,然后Show出定义好的菜单. 但是涉及到一些单击事件会收到编 ...

  8. 算法(Algorithms)第4版 练习 1.5.5

    对于quick-find,对每个输入数据对,其最少的循环次数为N(sites) 故对于109 sites和106 input pairs,其总的指令次数为:sum = 10^9 * 10^6 * 10 ...

  9. 【转】BNF和EBNF的含义与用法

    [转]BNF和EBNF的含义与用法   BNF 和EBNF的含义与用法 1简介       关于本文       什么是BNF?工作原理       基本原理       一个实例 EBNF及其用途  ...

  10. codeforces 460D:Little Victor and Set

    Description Little Victor adores the sets theory. Let us remind you that a set is a group of numbers ...