<p class="zw">首先，CSS2赋予了我们元素定位和层叠的能力，所以我们可以使用<code>z-index</code>来放置它们。而CSS3引入了<code>translate</code>，它用来沿着x轴或y轴移动元素。现在3D变换又带来了<code>translateZ</code>，可以用来移动元素，以控制元素和观察者之间的距离。</p> <p class="zw">为了演示<code>translateZ</code>，我们继续构建Get Hardboiled网站的3D界面。首先，我们将给这些封面图片添加样式，定义一个宽的边框。</p> <pre class="代码无行号"><code>@media (min-width: 48rem) { .item__img img { border-color : #9bc7d0; } .item__img img:hover { border-color : #eceeef; }</code></pre> <p class="zw">下一步，给内容简介添加宽度<code>width</code>和内边距<code>padding</code>，并通过相对定位使它们移动<code>150px</code>。同样，也给它们设定背景色和边框。</p> <pre class="代码无行号"><code>@media (min-width: 48rem) { .item__description { position : relative; top : -150px; padding : 11px; width : 160px; background-color : #dfe1e2; border : 10px solid #ebf4f6; } }</code></pre> <p class="图"><img alt="1822.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/240.jpg"></p> <blockquote class="提示 editing-block">
