CSS透视属性

原文:https://www.geeksforgeeks.org/css-perspective-property/

CSS 透视 属性用于给 3D 对象赋予透视效果。透视是三维物体在 2D 平面上的表现形式，以给出相对于彼此的外观深度和距离。定义透视属性时，子元素获得透视，而不是父元素。因此，该值定义了孩子离 Z 平面有多近。

如果 z 大于 0，每个三维元素都会变大&如果 z 小于 0，每个三维元素都会变小。效果的强度可以由透视属性值决定。视角的大值可以产生小的转换&视角的小值可以产生大的转换。用户后面的 3D 元素部分，即如果它们的 z 轴坐标大于透视 CSS 属性值，则不可能绘制。默认情况下，淡入淡出点位于元素的中心位置，尽管我们可以使用透视原点属性更改其位置。通过使用除了以外没有值的透视属性，可以创建新的堆叠上下文。

语法:

perspective: length| none| initial| inherit;


属性值:下面的例子很好地描述了所有的属性。

长度 : 长度属性用于设置子元素从查看器到 Z 平面的距离。所以，价值越小，形成的形象就越辉煌。

语法:

perspective: length;


示例:此示例说明了透视 属性的使用，其中长度值设置为 200px。

超文本标记语言

输出:

无:为默认值。它表示没有设置透视。无相当于 0px。

语法:

perspective: none;


示例:此示例说明了透视 属性的使用，其中属性值设置为无。

超文本标记语言

输出:

【初始】 : 用于将元素的 CSS 属性设置为默认值，即初始设置默认值。没有设定视角。

语法:

perspective: initial;


示例:此示例说明了使用透视 属性，其中属性值设置为初始值。

超文本标记语言

输出:

继承 : 用于从元素的父元素属性值 ie 继承元素的属性。，inherit 从父元素接收属性。当它与根元素一起使用时，将使用初始属性。

语法:

perspective: inherit;


示例:该示例说明了视角 属性的使用，其中属性值被设置为继承。

超文本标记语言

输出:

支持的浏览器:透视属性支持的浏览器如下:

• 谷歌 Chrome 36.0


• Internet Explorer 10.0


• 微软边缘 12.0


• Firefox 16.0


• Opera 23.0


• Safari 9.0