text.html

 
<p class="zw">切记，当你的过渡属性中包含延迟时间<code>delay</code>时，它一定要出现在持续时间<code>duration</code>之后。</p> 
<p class="zw">在前面，我们在网页中建立了一个3D界面，并为你留了一个悬念。如果必要的话，回顾一下，因为现在我们要为这些列表项添加过渡和三维空间内的<code>45deg</code>旋转。为了确保用户可以阅读我们的文本，当鼠标悬停时，我们把这些列表项转回原位来面对用户。</p> 
<pre class="代码无行号"><code>.item { 
transform : rotateY(45deg); 
transform-style : preserve-3d; } 

.item:hover { 
transform : rotateY(0); }</code></pre> 
<p class="zw">这种设置方式，过渡会立即执行。为了让界面的呈现更流畅，添加过渡属性，首先将过渡属性定义为<code>transform</code>。</p> 
<pre class="代码无行号"><code>.item { 
transition-property : transform; }</code></pre> 
<p class="zw">接下来，指定该过渡需要0.75秒（<code>.75s</code>），时间函数为<code>ease-in-out</code>。</p> 
<pre class="代码无行号"><code>.item { 
transition-duration : .75s; 
transition-timing-function : ease-in-out; }</code></pre> 
<p class="zw">当我们想减少一些样式表字节大小时，可以将这些属性组合成一条声明。</p> 
<pre class="代码无行号"><code>.item { 
transition : transform .75s ease-in-out; }</code></pre> 
<p class="zw">为了使3D界面更加具有真实性，通过<code>translateZ</code>属性使它靠近用户<code>80px</code>。然后向左后方移动，调整鼠标悬停时投影的强度。</p> 
<p class="图"><img alt="1903.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/243.jpg"></p> 
<pre class="代码无行号"><code>.item div {transform : translateZ(80px); 
box-shadow : -20px 20px 30px rgba(0,0,0,.25); } 

.item:hover .item__description { 
transform : translateZ(5px) translateX(20px); 
box-shadow : 0 10px 15px rgba(0,0,0,.5); }</code></pre> 
<p class="zw">我们将所有的状态变化延迟0.2秒（<code>.2s</code>）启动，持续0.5秒（<code>.5s</code>）。</p> 
<pre class="代码无行号"><code>.item__description { 
transition-property : transform, box-shadow; 
transition-duration : .5s, .5s; 
transition-delay : .2s, .2s; 
transition-timing-function : ease-in-out, ease-in-out; }</code></pre> 
<p class="zw">这两个属性的过渡使用了同样的持续时间、延时和时间函数。因此我们可以把两个值组合成一个来简化这条声明。</p> 
<pre class="代码无行号"><code>.item__description { 
transition-property : transform, box-shadow; 
transition-duration : .5s; 
transition-timing-function : ease-in-out; }</code></pre> 
<p class="图"><img alt="1904.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/244.jpg"></p> 
<p class="图题">我们的设计现在看起来更加的流畅，用户交互也更真实。</p>