3分钟掌握CSS 3D转换：从平面到立体的视觉魔法

亲爱的小伙伴们大家好，今天来看一下一个简单的东西，这里有一个卡片，今天主要是让它从2D转换成3D。会涉及到一些什么样的CS？看一下具体是要怎么做，其实非常的简单。整个布局应该看起来不难，主要用定位。

先看一下SM，这是一个标题，三个三段文字，一张图片，都是用一些定位，用一些绝对定位。这上面用reader，底部用一些position，post route进行绝对定位就可以了。

怎么转换成3D？

·第一步，先要做一个在flay，所以flay要transform姿态，要设置一个proc3D，让它作为3D呈现的效果，但是这样并没有呈现3D效果。

·还不应该怎么做？知道在3D中是有一个S，肯定是要有S、Y、Z，像平常可能一些移动，是不是只设置了一些S和一些Y？当属性设置了3D呈现之后，复类，词类就可以设置它的Z轴。

·第一步，先找到头，头的文字，设置个穿刺类Z，试试一下。在这里就设置一个10厘米米，文字就呈现出了这种3D，感觉像和后面的图片进行了分离，有3D的效果。

有些问10Vmini什么意思？这个单位可能大家用的比较少，稍微讲一下，像平常可能经常用到V、W还有V、H，mini是什么？其实很简单，这是V、W和V、H。

例如屏幕，就是V、H和V、H里面取小的这一部分，因为屏幕是100，1000，高是50，会取50里面的10%，就这样，会取宽和高的小的这一部分。相反的还有一个V、MAX，也是一样的，就会取大的部分，会以宽的值的10%，这里就有1米0。

·下一步，还把其他的文字也设置一下，这里就设置一个分，它是Z，5厘米，这是不是就要已经浮上来了？把其他三个文字一样的加一下，这就有一个效果就出来了。

·接下来再把其他的加一下，这一部分和标题是一样高，它是在一起的。

·最后就是图片，找到图片，20，让它最高，这样2D就转换成了3D的效果，是不是比刚才炫酷很多？

cs其实也很多，现在越来越多很好玩的一些东西，大家如果有兴趣可以多多研究。今天就到这，谢谢大家。