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. ubuntun下安装Fiddler

    对于分析网页或者写爬虫的时候经常需要用到抓包工具进行网页数据的抓包.在Windows下可以安装Fiddler来抓包.在ubuntun下不能直接安装Fiddler.需要先安装mono 1 首先安装mon ...

  2. JPA 多表分页查询

    业务场景:大学生毕业后统计毕业去向.学生实体和毕业去向实体一对一关系. 实体: @Entity @Data @Table(name = "t_s_student") public ...

  3. CentOS iSCSI服务器搭建------LUN篇

    先上服务器信息(你懂得) [root@node ~]# cat /etc/redhat-release CentOS release 6.6 (Final) [root@node ~]# uname ...

  4. sprintf在51单片机中的使用

    sprintf在51单片机中的使用 unsigned char ch20_str[4]; unsigned char ch2o_m_str[6]; ch2o = 123; ch2o_m = 23456 ...

  5. python用特殊方法定制类（不全）

    定义在class中不需要直接调用,python的某些函数或操作符会自动的调用对应的特殊方法. 1.python中 __str__和__repr__ __str__()用于显示给用户,而__repr__ ...

  6. MySQL服务器调优思路

    1.mysqladmin -uroot ext|awk '/Queries/{q=$4}/Threads_connected/{c=$4}/Threads_running/{r=$4}END{prin ...

  7. Java -- 乒乓球 乒乓弹球游戏

    <疯狂Java讲义> 练习游戏 import java.awt.Canvas; import java.awt.Color; import java.awt.Dimension; impo ...

  8. Mac 上Sublime Text 2配置lua环境

    1,首先下载最新版lua  然后解压到你想解压到的位置     http://www.lua.org/ftp/ 2,运行终端,cd  进入该文件夹src目录下. 3,在终端输入 make macosx ...

  9. 代码题（2）— 统计所有小于非负整数 n 的质数的数量

    质数也叫素数,只能被1和它本身整除的. 利用筛选法. class Solution { public: int countPrimes(int n) { ) ; ; vector<); ;i&l ...

  10. C++中的右结合性

    看到网上的说是,右结合 但是还是从左往右算 // 以下说法是从网上看的,不知道对不 a ? b : c ? d : e 如何进行呢? 它的结合律是从右向左,所以它等效于 a ? b : ( c ? d ...