text.html

 
<p class="zw">透视是实现元素3D效果的关键。需要使用<code>transform</code>属性将它们放进一个三维空间内。为了产生<code>perspective</code>，我们需要把它应用于父元素，而不是元素本身。我们不需要特殊的3D HTML元素，只需要一个div元素和一个使用了<code>hb-3d</code>class值的父元素就够了。</p> 
<pre class="代码无行号"><code><div class="hb-3d"> 
<div class="item"> […] </div> 
<div class="item"> […] </div> 
<div class="item"> […] </div> 
<div class="item"> […] </div> 
</div></code></pre> 
<p class="zw">在每个元素里面，我们添加两个<code>div</code>元素用来放置小说的封面图片和内容简介。</p> 
<pre class="代码无行号"><code><div class="item__img"> 
   <img src="raymondchandler-01.jpg" alt="Finger Man"> 
</div> 
<div class="item__description"> 
   <h3 class="item__header">Finger Man</h3> 
   <p>This Finger Man story originally featured an unnamed 
narrator.</p> 
</div></code></pre> 
<p class="zw">我们现在开始添加样式，使用小屏手机的用户将看到一个简单的二维布局，元素只是简单地水平排列。我们将给父元素<code>hb-3d</code>添加<code>display:flex;</code>，然后给每个元素添加<code>flex:1;</code>，并加上外边距、内边距和一个蓝色的宽边框。</p> 
<pre class="代码无行号"><code>.item { 
flex : 1; 
margin-right : 10px; 
margin-bottom : 1.35rem; 
padding : 10px; 
border : 10px solid #ebf4f6; }</code></pre> 
<p class="图"><img alt="1817.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/235.jpg"></p> 
<p class="图题">这个界面看起来很整洁，但是并没有什么亮点。</p> 
<p class="zw">3D布局需要浏览器窗口有足够大的宽度。现在开始定义这些样式。我们在媒体查询内部，为每个元素添加一个<code>45deg</code>的<code>rotate</code>转换。我们不需要外边距、填充和边框，所以把它们删掉。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.item { 
transform : rotateY(45deg); 
margin : 0; 
padding : 0; 
border-width : 0; } 
}</code></pre> 
<p class="图"><img alt="1818.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/236.jpg"></p> 
<p class="图题">当在二维空间旋转这些部分时，它们像是被压扁了。</p> 
<pre class="代码无行号"><code>@media (min-width: 48rem) { 
.hb-3d { 
perspective : 500; } 
}</code></pre> 
<p class="zw">提高或者降低<code>perspective</code>，会对每个元素产生如下图所示的影响。</p> 
<p class="图"><img alt="1819.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/237.jpg"></p>