css3 perspective与translateZ变换
css3中的坐标系，rotateX就是绕着x轴旋转，rotateY就是绕着Y轴旋转，rotateZ就是绕着z轴旋转（也就是xy平面的旋转）。
perspective属性用来设置视点，在css3的模型中，视点是在Z轴所在方向上的。
translateX,translateY表现出在屏幕中的上下左右移动，transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，你不可能看到自己的后脑勺。（200-transformZ的值）就是视点和xy平面的距离（初始是屏幕的位置，此时transformZ的值为0）。
需要注意的一点是，整个坐标系中各各坐标轴的相对关系是固定的。正常情况下，视点和我们的眼睛是同一个方向的如同上面所讲。而当执行如rotateX(90deg)等旋转变换时，zy平面旋转，z轴和y轴的指向也会变化90度。此时z轴指向上方，视点也是在上方，此时我们从屏幕上看的就不是直观的元素大小变化，而是元素的升降变化，好像站在远处在看一部电梯或者你把书本平放举过头顶或下放那样。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{margin:30px;width:auto;display:inline-block;}
div img{width:280px;}
</style>
</head>
<body>
<div><img src="data:images/a9.png"></div><!--正常放置，无变化-->
<div style="perspective:300px"><img src="data:images/a9.png" style="transform:translateZ(40px)"></div><!--z轴朝着屏幕，图片推向你所在的方向-->
<div style="perspective:300px"><img src="data:images/a9.png" style="transform:rotateX(90deg)"></div><!--Z轴朝天，视点在Z轴方向上-->
<div style="perspective:300px"><img src="data:images/a9.png" style="transform:rotateX(90deg) translateZ(60px)"></div><!--Z轴朝天，视点在Z轴方向上，朝视点推进，图片上升-->
<div style="perspective:300px"><img src="data:images/a9.png" style="transform:rotateX(90deg) translateZ(-60px)"></div><!--Z轴朝天，视点在Z轴方向上，朝视点远离，图片下降-->
</body>
</html>
perspective属性用在容器上时，容器内每个元素的表现形式会不一样。当perspective属性用再容器内每个元素身上时，会根据各自的设置值进行表现。打个比方就是你一个人平视盒子里的10个鸡蛋和十个你每人看1个一模一样鸡蛋。
css3 perspective与translateZ变换的更多相关文章
- css3控制字体动态变换颜色
css3控制字体动态变换颜色 <!doctype html> <html> <head> <meta charset="utf-8"> ...
- CSS3总结七：变换（transform）
2D视图模型解析 3D视图模型解析 平移 旋转 伸缩 扭曲 z轴方向平移与perspective的神秘关系 matrix()终极变幻的方法 一.2D视图 2D视图就是默认平面上的每个点都与视线垂直,图 ...
- 详解如何用 CSS3 完成 3D transform变换
Tips:阅读提示!!! 首先,本文针对的是3D transform变换的学习,所以你需要对 2D transform变换 有一定的了解 其次,需要说明的是,代码是一种需要自己不断实践的学科,建议各位 ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换2
3 perspective-origin景深基点 perspective-origin景深基点属性时3D变形中另一个重要属性,主要用来决定perspective属性的源点角度.它实际上设置了X轴和Y ...
- IT兄弟连 HTML5教程 CSS3属性特效 3D变换1
3D变换较2D变换多了一下的转换属性,3D转换属性及描述如表1: 表1 3D转换属性 3D的转换方法如表2: 表2 3D转换方法 1 transform-style transform- ...
- 纯CSS3实现多层云彩变换飞行动画
查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh& ...
- css3 过渡和2d变换——回顾
1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css ...
- IT兄弟连 HTML5教程 CSS3属性特效 2D变换1
通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...
- css3 perspective perspective-origin属性的理解
perspective字面意思是:透视. 在w3school中它的解释为:设置元素被查看位置的视图:通俗讲,就是我们看看一个物体的所处的视角,近大远小.就比如我们正对着电脑:当我无限贴近电脑屏幕的时候 ...
随机推荐
- C#倒计时关闭提示框
前两天实现某个功能需要做一个提示框 并且能够自动关闭的,就从网上搜了一个能够自动关闭的提示框 ,但由于我需要的场景是不确定计时时间的,所以并没有使用到该窗体,但是我觉得可以留存备用 ,后边也把我 这种 ...
- hadoop入门-centos7.2安装hadoop2.8
1. 安装准备 (1)必须安装jdk: 因为hadoop是基于Java实现的,所有必须安装jdk 是JDK不是jre jdk1.7 jdk1.8 (2)系统位数 (3)创建专用用户 useradd h ...
- webstorm编写react native，代码修改后，重新编译运行没有变化的问题
w我是拷贝一份react native代码到另一台电脑,发现修改代码运行之后不显示修改后的效果,即仍然与原来的效果一样,暂时不知道什么原因, 后来我运行了npm install 就可以了,不知道是不是 ...
- Linux开机自动启动服务
当我们的Linux,关机后,或者重启后,有些服务需要人工启动才能有.为了解决这个问题,我找了一个办法,用一个脚本,开机启动想启动的服务. 方法一:(强烈推荐) 1.写一个脚本auto.sh vim ...
- 阿里P7详细解答JVM性能调优之监控工具
javap 和 javac javac -verbose 类名.java java -verbose 类名 javap -c 类名 javap -verbose 类名 JAVAP -HELP 用法: ...
- cdh的web管理界面503
503 Service Unavailable No server is available to handle this request. 重启 agent 以及 server
- 软硬RAID 和 不常见的RAID
若转载请于明显处标明出处:http://www.cnblogs.com/kelamoyujuzhen/p/5561809.html 为啥子引入RAID? 存储最现实的两个问题:速度.容量 001——计 ...
- 【OF框架】在部署中使用 Windows身份认证
准备 了解Windows身份认证相关知识及原理 框架开发项目完成,并完成发布包,完成在IIS中部署. 框架支持对Windows身份认证的实现,仅需要通过配置节进行配置即可切换,可以在部署的时候配置即可 ...
- Loadrunner 计算保留两位小数不四舍五入
有时候在测试过程中会截取返回值,当你截取的值不是最终的值,需要进行计算后才能使用并且需要保留两位小数,不进行四舍五入的计算: 此时 我使用了各种办法,但是最终我采用了一种最直接,最暴力的方法就是先乘后 ...
- Entity Framework 在MySQL中执行SQL语句,关于参数问题
在Entity Framework中添加MySQL模型,在写代码的过程中需要直接执行SQL语句. 在SQL语句中用到了@curRank := 0 这样在SQL语句中定义参数,同时还会有传入参数:ai. ...