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. Django 之 缓存机制

    Django 缓存机制 缓存介绍 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的用户访问量很大的时候,每一次 ...

  2. model特性

    1.scope http://blog.csdn.net/lissdy/article/details/51107883 2.ActiveConcern http://www.tuicool.com/ ...

  3. HDU - 1003 Max Sum 【DP】

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1003 题意 给出一个序列 要求找出一个和最大的子序列 思路 O(N)的做法 但是要标记 子序列的头部位 ...

  4. hid_info函数分析

    昨天博文<linux下无线鼠标驱动执行流程>中有一行输出信息很让我迷惑,如下所示: [ :1D57: Mouse [HID Wireless Mouse HID Wireless Mous ...

  5. Linux 中 bashrc 中的 rc 是什么意思

    刚刚配置 .bashrc 文件时,突然想,这里面的 rc 是什么意思? 使用了这么长时间,这个都不知道,这是醉了.Google 之,还真有不少人探究过,哈哈. 这个 ubuntu 中文论坛里,有人回答 ...

  6. Shiro身份认证-JdbcRealm

    Subject 认证主体 Subject认证主体包含两个信息 Principals : 身份,可以是用户名.邮箱.手机号等,用来标识一个登录主体身份. Credentials : 凭证,常见有密码,数 ...

  7. Struts2 内核之我见

    Struts2 内核之我见 完整分析 Struts2 内核中文文档 本文首先探讨了 Struts2 核心控制器的源码,以帮助解读 Struts2 的工作流程.接着讲解相关外围类.最后对 Struts ...

  8. spring boot项目多环境配置文件设置

    具体做法: 不同环境的配置设置一个配置文件,例如:dev环境下的配置配置在application-dev.properties中:prod环境下的配置配置在application-prod.prope ...

  9. KISSY(JS)炫动导航,缓动应用实例(^_^)

    一个基于KISSY的简单的动画导航,效果还不错,有点像flash的效果.鼠标移到每一个连接上,背景滑块会迅速移到该链接下方,同时平滑改变大小,自适应链接尺寸,并伴随来回的轻微波动,动感相当不错,呵呵, ...

  10. Codeforces 571B Minimization:dp + 贪心【前后相消】

    题目链接:http://codeforces.com/problemset/problem/571/B 题意: 给你一个长度为n的数列a[i]. 现在你可以随意改变数字的位置,问你 ∑| a[i] - ...