css3 中perspective-origin，为什么x的值设置为一个很大的数时元素的长变的非常大？

html-css015

css3 中perspective-origin，为什么x的值设置为一个很大的数时元素的长变的非常大？,第1张

透视效果是依赖于人眼来产生的，而人眼的可视范围大概在120度左右，3D物体处在这个范围内产生的透视效果才是真实的，超出这个范围（比如说物体是放在你耳朵边的），人眼看不到了，自然就不会有什么透视效果了，假如这个时候又强行利用电脑手段把这个并不存在的逗透视效果地用图片表现出来，就肯定会出现严重的变形。因此那个属性的x或y值不能设置得太大。

你可以自己测试一下：你把手机横着贴在耳边，这时候你的眼睛只能看到手机的一小部分，大部分是看不到的，这时候你看到的手机的透视效果（尽管只有一小部分，而且很模糊，因为它不在你的视觉中心）是真实的，但假如现在要把看不见的那一大部分也用图片表现出来，你脑子里能想象出应该是什么样子吗看

这是实际上指的是成像画布距离div的距离，你可以把成像画布想象成地面，有一个div站在地面上150米距离（就是这个属性设置150的意思，不过单位不是米），然后太阳把div的影子投在地面上。离地面远和近，都会使影子在地面上的大小形状不一样。这个影子，就是最终你在电脑屏幕上看见的。这个属性没有上下限。

关于CSS3，可以先查看一下文档

新特性有：

border-radius 圆角, @font-face 字体, box-shadow text-shadow 框和文本的阴影

word-wrap, background-size, background-origin, border-image, box-sizing, calc, linear-gradient 等等

transform 转换

rotate(XYZ) 根据x,y,z轴旋转

translate(XYZ), scale(XYZ) 同理

perspective 透视，这个很多3D效果都要设置一下，不然3D还是只会有”2D”的效果

rotate 旋转，图片转个90或180度什么的

translate 位置移动

scale, skew, matrix 等

2D 转换

3D 转换

transition: 过渡，简单的动画（如：移个位置，变个长短），直接用这个属性就能搞定。

animation: 动画，3D可以调用硬件渲染。

新的长度单位：rem， ch，vw，vh，vmax，vmin 等。其中ch:数字“0”的宽度,vw 相对于视窗的宽度：视窗宽度是100vw.

clip-path: 绘制路径，类似SVG技术。 国外炫酷产品。

flex: flex布局，继 table 和 div 后的趋势，不了解或不熟悉的可以参考cssreference。

伪类选择器：如::target, :enabled, :disabed, :first-child, last-child等等

@media 媒体查询，适用于一些响应式布局中

columns: 分栏布局。

will-change: 改善渲染性能, 参考使用CSS3 will-change提高页面滚动、动画等渲染性能。