3D空间（preserve-3d）是CSS3.0极具特点一个新增功能，它可以指定嵌套元素如何在三维空间进行呈现，下面我们通过一个案例来阐述一下它的用法，最终的效果如下图所示：
工具/原料
1
Sublime编辑器
2
HTML+CSS
方法/步骤
1
首先准备我们所需要素材，如下图所示：
2
编写效果所需的HTML结构，并对其进行基础样式设置，代码如下图所示：
3
调整两张扑克牌图片的位置，使其水平垂直居中显示，代码及效果如下图所示：
4
分别为两个扑克牌图片进行translate位移变形，此时位移后并没有发生视觉上的变化，代码及效果如下图所示：
5
为了能看到两张扑克牌在Z轴上的位移，我们定义一个动画并添加到类名为t-3d的元素上，此时预览效果扑克牌已经转动起来了，但在Z轴上的位移仍未显示出来，代码及效果如下图所示：
6
我们将“transform-style:preserve-3d”添加到类名为t-3d的元素上
7
打开浏览器预览效果，可以看到两张扑克牌的位置已经拉开了！你学会了吗？
注意事项
1
3D空间需要添加到变形元素的父元素或是祖先素上
2
沿X或Y轴一般不需要使用三维空间，当沿Z轴移动时才需要将其父元素设置为三维空间
3
要让图片沿Y轴转一圈后你才能看得见哟