css3 3D样式学习笔记

css3 3D样式学习笔记

=

transform-style

1. flat ：2D展示；
2. 3d ：3d展示，用于父元素上，表示此元素下的子元素可以进行3D展示，即可以使用transform3d对应的css属性展示效果；

persperctive

景深长度：perspective:1000px
含义1：应用于父元素上，表示当前元素下的所有子元素有透视效果。透视效果的意义就是有远大近小的效果，如果只设置了transform-style:3d,虽然可以进行3d变换，但是展示的效果不会像人眼那种看出远大近小的效果。

含义2:1000px指观察点离屏幕的距离有1000px个像素，和屏幕平行。

含义3：此样式应用在父元素上，代表观察点都是以父元素为准，如果父元素下有子元素，子元素的观察点也是以这个观察点为准（相当于以父元素为整体，下面的子元素都属于父元素），这样就会造成父元素下各个子元素的透视效果会不一样，满足现实的效果，如果对各个子元素单独设置此样式，才会出现每个子元素效果一样的情况。

含义4：屏幕所处的位置是Z轴上的0，某个子元素的展现的效果是元素在屏幕上的投影，注意投影这个概念很重要，元素是可以根据translateZ进行Z轴上的移动，观察点和对应元素的连线或者延长线在屏幕上的投影（屏幕Z值为0）才是显示的效果，translateZ为0，和非0时，对应在屏幕上的投影不一样。

perspective-origin

观察点设置
含义1：此样式和perspective定义在一个元素上共同作用，相当于对于定义了perspective:1000px的元素而言，在屏幕前方1000px处和屏幕平行的一个面上，复制一个一模一样的元素，且他们之间的中心连线是垂直于屏幕平面的，然后再在这个复制的元素上设置观察点。
含义2：设置的是元素的x，y轴方向的偏移量，偏移初始值是元素左上角0,0处，默认是中间center center位置，可以是px 百分比 和 字符（top，center等）