css3 tranform perspective属性
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属性的更多相关文章
- 如何理解 css3 的 perspective 属性
一.写在前面的话 最近想多了解一下CSS3的transform 3D效果,transform:英文直译就是转换,它可以实现旋转.缩放.位移等效果,听起来有没有觉得很酷的样子,狠狠的点这里来看看旋转和位 ...
- CSS3教程:Transform的perspective属性设置
1 2 <div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(4 ...
- CSS3 Transform的perspective属性
以下两行语句有什么区别? Css <div id="animateTest" style="-webkit-transform: perspective(400px ...
- CSS3: perspective 3D属性
本文引自:http://blog.csdn.net/cddcj/article/details/52956540 perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产 ...
- CSS3 Tranform 3D 的应用
CSS3 Tranform 3D 的应用 一.perspective 属性 1. 作用: 设置元素被查看位置的视图,类似于眼睛到屏幕的距离,一般跟 perspective-origin 共同作用在一个 ...
- Transform-style和Perspective属性
transform-style属性 transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现.他主要有两个属性值:flat和preserve-3d. transfor ...
- css3 tranform transition animation
tranform:对象图形变形 tranform的属性包括: 1.none 表示不进行变换: 2.rotate 旋转 transform:rotate(20deg) 旋转 ...
- CSS3景深-perspective
3D视图正方体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- css3的3d属性集合
css3的3d属性集合 想进入css3的3d世界必须知道一下几个属性及其用法. 当然在进入属性介绍之前我想你必须知道3维坐标,附上一张经典图如下: 我想不用解释了吧.之后要平移和旋转都是在这个基础之上 ...
随机推荐
- Django 之 缓存机制
Django 缓存机制 缓存介绍 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑,最后生成用户看到的页面. 当一个网站的用户访问量很大的时候,每一次 ...
- model特性
1.scope http://blog.csdn.net/lissdy/article/details/51107883 2.ActiveConcern http://www.tuicool.com/ ...
- HDU - 1003 Max Sum 【DP】
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1003 题意 给出一个序列 要求找出一个和最大的子序列 思路 O(N)的做法 但是要标记 子序列的头部位 ...
- hid_info函数分析
昨天博文<linux下无线鼠标驱动执行流程>中有一行输出信息很让我迷惑,如下所示: [ :1D57: Mouse [HID Wireless Mouse HID Wireless Mous ...
- Linux 中 bashrc 中的 rc 是什么意思
刚刚配置 .bashrc 文件时,突然想,这里面的 rc 是什么意思? 使用了这么长时间,这个都不知道,这是醉了.Google 之,还真有不少人探究过,哈哈. 这个 ubuntu 中文论坛里,有人回答 ...
- Shiro身份认证-JdbcRealm
Subject 认证主体 Subject认证主体包含两个信息 Principals : 身份,可以是用户名.邮箱.手机号等,用来标识一个登录主体身份. Credentials : 凭证,常见有密码,数 ...
- Struts2 内核之我见
Struts2 内核之我见 完整分析 Struts2 内核中文文档 本文首先探讨了 Struts2 核心控制器的源码,以帮助解读 Struts2 的工作流程.接着讲解相关外围类.最后对 Struts ...
- spring boot项目多环境配置文件设置
具体做法: 不同环境的配置设置一个配置文件,例如:dev环境下的配置配置在application-dev.properties中:prod环境下的配置配置在application-prod.prope ...
- KISSY(JS)炫动导航,缓动应用实例(^_^)
一个基于KISSY的简单的动画导航,效果还不错,有点像flash的效果.鼠标移到每一个连接上,背景滑块会迅速移到该链接下方,同时平滑改变大小,自适应链接尺寸,并伴随来回的轻微波动,动感相当不错,呵呵, ...
- Codeforces 571B Minimization:dp + 贪心【前后相消】
题目链接:http://codeforces.com/problemset/problem/571/B 题意: 给你一个长度为n的数列a[i]. 现在你可以随意改变数字的位置,问你 ∑| a[i] - ...