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. Js编写的菜单树

    只需要提供这种JSON格式就ok了 其他的都可以直接引用这个代码进去 var testMenu=[ { "name": "一级菜单", "submen ...

  2. Jquery遍历table并拿到每个单元格里的值

    $('#table_id tr').each(function(i){ alert(i); if(i!=0){ //td内的文本 var v0 = $(this).children('td').eq( ...

  3. iOS 代码延迟执行

    1. [NSTread sleepForTimeInterval:0.8f] 这个方法 实际效果 好比打断点 等你再恢复断点执行 2.  [self performSelector:@selector ...

  4. 每天一个Linux命令(26)chown命令

          chown命令改变某个文件或目录的所有者和所属的组,该命令可以向某个用户授权,使该用户变成指定文件的所有者或者改变文件所属的组.     (1)用法:     用法:  chown [选项 ...

  5. hd acm2035

    求A^B的最后三位数表示的整数.说明:A^B的含义是“A的B次方” 思路:后三位只跟后三位相乘有关,所以可以每乘一次都对1000取余. 代码: #include <stdio.h>#inc ...

  6. hbase离线定时入库shell脚本-小栗子

    #!/bin/bash #######数据类型(cdr,ims,pc,.ngn_sip)###### dir=*** ############# #原始文件地址 oripath=/bigdata/da ...

  7. 2014年互联网IT待遇

    1. 13k*14~16k*145.美团 13k*15~16k*15,也有更高的.6.去哪儿 11k*16~15k*167.人人技术类(12K-14K)*14 (2014)8.58同城 20w+9.网 ...

  8. mysql中的内连接,外连接实例详解

    内连接: 只连接匹配的行左外连接: 包含左边表的全部行(不管右边的表中是否存在与它们匹配的行),以及右边表中全部匹配的行右外连接: 包含右边表的全部行(不管左边的表中是否存在与它们匹配的行),以及左边 ...

  9. STL中流相关的输入输出符和get函数彻底总结:cin、cin.get()、cin.getline()、getline()、gets()等函数的用法

    我的总结: [首先:对于流来说,就把流看成一个中转的仓库,对流进行<<运算或>>运算或者get函数的运算都是指,把“流”中的数据“运送”到“内存变量”中去,还是把内存变量中的数 ...

  10. C++(六)— 输入方式

    1.输入包含空格的字符串 使用 getline(cin, str)读取一行字符串,遇到换行符停止:cin>>str,是遇到空格就停止. 实现:输入两个字符,在第一个字符中删除第二个字符中出 ...