【CSS进阶】试试酷炫的3D视角

写这篇文章的缘由是因为看到了这个页面：

戳我看看（移动端页面，使用模拟器观看）

运用 CSS3 完成的 3D 视角，虽然有一些晕3D，但是使人置身于其中的交互体验感觉非常棒，运用在移动端制作一些 H5 页面可谓十分博人眼球。

并且掌握原理之后制作起来也并不算废力，好好的研究了一番后将一些学习过程共享给大家。

下面进入正文：（一些 Gif 图片较大，需要等待一会）

3D 效果示意

百闻不如一见，先直观感受一下上述我所说的效果：

最好能点进去看看，这里我使用了带背景色的 div 作为示例，我们的视角处于一个正方体中，正方体的旋转动画让我们有了 3D 的感觉。

那么原本的图长什么样呢？我们把距离拉远，一探究竟：

是长这样的：

相较于第一种效果，其实所做的只是将我们的视角推进到了正方体当中，有了一种身临其景的感觉。

而合理的运用 CSS3 所提供的一些 3D 属性，很容易就能达到上述的效果。

制作这样一个 3D 图形，我在之前的文章已经很详细的讲述了过程，感兴趣的可以戳进去看看：

【CSS3进阶】酷炫的3D旋转透视

transform-style 与 perspective

再简单复述一下，主要是运用到了两个 CSS 属性：

transform-style

要利用 CSS3 实现 3D 的效果，最主要的就是借助 transform-style 属性。

transform-style 只有两个值可以选择：

// 语法：
transform-style: flat|preserve-3d;
 
transform-style: flat; // 默认，子元素将不保留其 3D 位置
transform-style: preserve-3d; // 子元素将保留其 3D 位置。 

查看更多关于【CSS进阶】试试酷炫的3D视角的详细内容...