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中它的解释为:设置元素被查看位置的视图:通俗讲,就是我们看看一个物体的所处的视角,近大远小.就比如我们正对着电脑:当我无限贴近电脑屏幕的时候 ...
随机推荐
- zookeeper安装简要步骤
vi zoo.cfg1.dataDir=/var/zookeeper2.server.1=zoo1:2888:3888server.2=zoo2:2888:3888server.3=zoo3:2888 ...
- Nginx的反向代理和负载均衡服务
Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行. ...
- java,单文件和多文件上传代码范例
上传一个单文件,用request.getFile得到文件(下面的功能是上传到阿里云) @RequestMapping(value = {"/content"}, method = ...
- python urllib应用
urlopen 爬取网页 爬取网页 read() 读取内容 read() , readline() ,readlines() , fileno() , close() :这些方法的使用方式与文件对象完 ...
- 打造完美Python环境(pyenv, virtualenv, pip)
写在最前 在使用 Python 进行开发和部署的时候,经常会碰到Python版本或者依赖包或者对应版本不同导致各种意外情况发生. 本文将介绍如何通过 pyenv, virtualenv, pip三个工 ...
- TLS1.3 握手过程特性的整理
1.密码协商 TLS协议中,密码协商的过程中Client在ClientHello中提供四种option 第一:client 支持的加密套件列表,密码套件里面中能出现Client支持的AEAD算法或者H ...
- Pyspark笔记一
1. pyspark读csv文件后无法显示中文 #pyspark读取csv格式时,不能显示中文 df = spark.read.csv(r"hdfs://mymaster:8020/user ...
- IDEA类的旁边有个对勾
说明该类添加到IDEA的书签栏去了,在IDEA左侧下方有个Favorites选项,在这里的BookMarks中可以看到这个类. 取消方法: 选中这个类,按F11即可取消
- POI中的CellType类型以及值的对应关系
POI 中的CellType类型以及值的对应关系 CellType 类型 值 CELL_TYPE_NUMERIC 数值型 0 CELL_TYPE_STRING 字符串型 1 CELL_TYPE_FOR ...
- appium webdriver 基本操作及小例子等
#encoding=utf-8 ''' ''' #driver新建 driver=webdriver.Remote('http://localhost:4723/wd/hub',caps) #关闭dr ...