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中它的解释为:设置元素被查看位置的视图:通俗讲,就是我们看看一个物体的所处的视角,近大远小.就比如我们正对着电脑:当我无限贴近电脑屏幕的时候 ...
随机推荐
- 解决阿里云OSS The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint的办法
以前有一个上海节点的存储包,一直使用正常.最近购买了一个全国的存储包,发现在上传文件的时候有这个问题. 尝试了很多办法,还提交了工单,都没有解决. 最后解决办法如下: 1.在阿里云OSS管理控制台下, ...
- 对于Element-ui分页进行再次的封装使用
这是我项目的分页的目录结构,话不多说,直接上代码. <template> <div class="pagination-container"> <el ...
- iOS中JSON解析三方库的比较
网络数据解析框架 1. JsonModel 一个 JSON 模型转换库,有着比较简洁的接口.Model 需要继承自 JSONModel. 2. yyModel yyModel比较轻量(算上.h 只 ...
- 前端框架开始学习Vue(三)
初步安装.与搭建 https://www.cnblogs.com/yanxulan/p/8978732.html ----如何搭建一个vue项目 安装 nodejs,,, npm i == np ...
- 爬虫：selenium请求库
一.介绍 二.安装 三.基本使用 四.选择器 五.等待元素被加载 六.元素交互操作 七.其他 八.项目练习 一.介绍 # selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requ ...
- Linux中安装配置启动关闭nginx等一系列动作
Nginx简介 1.Nginx (engine x) 是一个高性能的Web服务器和反向代理服务器,也可以作为邮件代理服务器: 2.Nginx 是由俄罗斯人 Igor Sysoev 采用C语言开发编写的 ...
- Python笔记(30)-----logger
转自: https://www.jb51.net/article/139080.htm logging模块介绍 Python的logging模块提供了通用的日志系统,熟练使用logging模块可以方便 ...
- Oracle使用游标查询所有数据表备注
功能作用:应用对应的SQL语句,能方便快速的查询Oracle数据库指定用户的所有用户表说明,快速知道每个数据表是做什么的,方便写文档和方案. 运行环境:搭建好Oracle数据库,并使用PQ/SQL D ...
- P1080 【NOIP 2012】 国王游戏[贪心+高精度]
题目来源:洛谷 题目描述 恰逢 H国国庆,国王邀请n 位大臣来玩一个有奖游戏.首先,他让每个大臣在左.右手上面分别写下一个整数,国王自己也在左.右手上各写一个整数.然后,让这 n 位大臣排成一排,国王 ...
- 本地python环境检查，插件检查及插件安装
电脑windows键+r 输入cmd 在python命令模式下 pip list --可以查看已安装的插件情况 或者用 pip freeze 也可以 卸载插件:pip uninstall *** ...