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中它的解释为:设置元素被查看位置的视图:通俗讲,就是我们看看一个物体的所处的视角,近大远小.就比如我们正对着电脑:当我无限贴近电脑屏幕的时候 ...
随机推荐
- SqlServer中Index Seek的匹配规则（一）
我们知道在SqlServer中,索引对查询语句的优化起着巨大的作用,一般来说在执行计划中出现了Index Seek的步骤,我们就认为索引命中了.但是Index Seek中有两个部分是值得我们注意的,我 ...
- WPF不同方式快捷键判断
private void Window_PreviewKeyDown(object sender, KeyEventArgs e) { //单个按键e.Key方式判断 if (e.Key == Key ...
- Eva 剧情解析
Eva 剧情解析 来源 https://zhuanlan.zhihu.com/p/20864898 [0.写在前面的话] 相信和我年龄差不多的小伙伴们对<新世纪福音战士>( <Neo ...
- 关于Vue中，$this.router.push到当前页面，只是传入参数不同，页面不刷新的问题解决
在页面的watch中,监听$router的变化 watch: { $route (to, from) { this.$router.go(0) } } 其中this.$router.go(0)为刷新页 ...
- extjs layout 最灵活的页面布局样式
当你在页面布局的时候,遇到页面元素较多,不知如何完美布局... 可以试试下面这个类型,万能布局类型. var panel = new Ext.Panel({ renderTo:Ext.getBody( ...
- CSS ,flex： 1的用处
flex: 1:的妙用 首先 flex 是 flex-grow.flex-shrink.flex-basis的缩写. 当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex- ...
- apache ftp server 设置
<server xmlns="http://mina.apache.org/ftpserver/spring/v1" xmlns:xsi="http://www.w ...
- Linux 之 软件安装
单纯一个操作系统是没有办法满足我们的需求的,所以需要各种安装各种软件来满足我们日常工作.生活需求.一般情况下,Linux常用的安装方式有两种,以CentOS为例: 1.从源代码安装软件 将软件源代码编 ...
- Flutter——消息框（Fluttertoast）
引入依赖: dependencies: fluttertoast: ^3.1.3 import 'package:flutter/material.dart'; import 'package:flu ...
- spice在桌面虚拟化中的应用系列之三(USB映射实现,SSL加密,密码认证,多客户端支持)
本系列其它文章 spice在桌面虚拟化中的应用系列之一(spice简介,性能优化等) spice在桌面虚拟化中的应用系列之二(Linux平台spice客户端的编译安装,支持USB映射) 1.spice ...