首先，CSS2赋予了我们元素定位和层叠的能力，所以我们可以使用z-index来放置它们。而CSS3引入了translate，它用来沿着x轴或y轴移动元素。现在3D变换又带来了translateZ，可以用来移动元素，以控制元素和观察者之间的距离。

为了演示translateZ，我们继续构建Get Hardboiled网站的3D界面。首先，我们将给这些封面图片添加样式，定义一个宽的边框。

@media (min-width: 48rem) { 

.item__img img { 
border-color : #9bc7d0; } 

.item__img img:hover { 
border-color : #eceeef; }

下一步，给内容简介添加宽度width和内边距padding，并通过相对定位使它们移动150px。同样，也给它们设定背景色和边框。

@media (min-width: 48rem) { 

.item__description { 
position : relative; 
top : -150px; 
padding : 11px; 
width : 160px; 
background-color : #dfe1e2; 
border : 10px solid #ebf4f6; } 
}