CSS3中transform-style和perspective

一、transform-style

1、transform-style属性是3D空间一个重要属性,指定嵌套元素如何在3D空间中呈现。

有两个属性值:flat和preserve-3d。

transform-style属性的使用语法非常简单: transform-styleflat | preserve-3d

其中flat值为默认值,表示所有子元素在2D平面呈现。

2、preserve-3d表示所有子元素在3D空间中呈现。

  如果对一个元素设置了transform-style的值为flat,则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上,而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d,它表示不执行平展操作,他的所有子元素位于3D空间中。

二、perspective属性

perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置,并将可视内容映射到一个视锥上,继而投到一个2D视平面上。如果不指定透视,则Z轴空间中的所有点将平铺到同一个2D视平面中,并且变换结果中将不存在景深概念。

其实对于perspective属性,我们可以简单的理解为视距,用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定,值越,用户与3D空间Z平面距离越,视觉效果更令人印象深刻;反之,值越大,用户与3D空间Z平面距离越远,视觉效果就很小。在3D变形中,对于某些变形,例如下面的示例演示的沿Z轴的变形,perspective属性对于查看变形的效果来说必不可少。

CSS3中transform-style和perspective

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>3d</title>
6 <style>
7 .out{
8 width: 500px;
9 height: 500px;
10 border: 1px solid

三、backface-visibility属性

backface-visibility属性决定元素旋转背面是否可见。对于未旋转的元素,该元素的正面面向观看者。当其Y轴旋转约180度时会导致元素的背面面对观众。

backface-visibility属性使用语法很简单:

backface-visibility: visible | hidden

该属性被设置为以下两个关键词之一:

  • visible:为backface-visibility的默认值,表示反面可见

  • hidden:表示反面不可见

案例:

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 body{
8 background-color: deepskyblue;
9 }
10 .box{
11 width: 300px;
12 height: 300px;
13 border:1px solid

       

 

 

 

 

 

CSS3中transform-style和perspective》来自互联网,仅为收藏学习,如侵权请联系删除。本文URL:http://www.hashtobe.com/456.html