CSS笔记

8.26

1.3D效果

3D效果坐标轴示例

                                

1.1.透视属性

语法： 给所有的子元素设置： perspective: 1000px;

给元素本身设置 ： transform: perspective(300px) rotateY(60deg) ;

定义3D元素的透视效果 (景深或视角)，（或者可以理解为： 设置从何处查看一个元素） 值越小，元素离视图越近，透视效果越明显，值越大，越远离视图，透视效果越不明显。

透视效果可以添加给父元素 也可以 添加给子元素

区别在于：

给父元素： 子元素有共同的视角

给子元素，各个子元素有自已的视角

1.2.灭点位置

语法：perspective-origin : x轴 y轴;

可以使用的值：left，center，right，length，%；top，center，bottom

perspective-origin：改变视图角度（可理解为视线的方向），影响三维效果呈现。 坐标为当前元素的原点。和perspective结合使用。 可以使用当前元素改变透视元素的视图角度，默认的是x轴和y轴的中心点

1.3.是否为3D模型

语法：transform-style: flat|preserve-3d(preserve-3D | flat 2d效果，默认);

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素 需要设置在3D变换的父元素中，并且高于任何嵌套的变形元素。 如果你的父元素设置了transform-style值为preserve-3d，就不能为了防止子元素溢出

1.4.设置变换中心

在3D效果中设置变换中心，2D中也是使用当前属性，3D中可以多设置一个值

语法：transform-origin : x轴 y轴 z轴;

注意：Z轴只能设置为像素值，不能用关键字和百分比

1.5.不面对屏幕时是否可见

语法：backface-visibility: visible | hidden;

backface-visibility：定义元素在不面对屏幕时是否可见

1.6.3D旋转

rotate3d(x,y,z,angle) 3D旋转 x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值； y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值； z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值； a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

rotateX(a)函数功能等同于rotate3d(1,0,0,a) rotateY(a)函数功能等同于rotate3d(0,1,0,a) rotateZ(a)函数功能等同于rotate3d(0,0,1,a) a指的是一个旋转角度值

1.7.3D缩放

transform: scale3d（x,y,z） x：x轴的缩放比例, y：y轴的缩放比例, z：z轴的缩放比例