<p class="zw">这个界面即将设计完成，但是你可能已经发现，由于<code>perspective</code>的增加，这些内容简介变得难以阅读了。为了解决这个问题，当鼠标悬停在元素上时，让它正向面对用户就好了。做到这一点，只需要在鼠标悬停时把y轴的旋转值设置为<code>0</code>就可以了。</p> <pre class="代码无行号"><code>.item:hover { transform : rotateY(0); }</code></pre> <p class="zw">为了获得更极致的效果，我们还将内容简介元素的<code>translateZ</code>属性值从80像素减小为<code>5px</code>，同时将它向右移动<code>20px</code>。</p> <pre class="代码无行号"><code>.item:hover .item__description { transform : translateZ(5px) translateX(20px); }</code></pre> <p class="zw">当这些内容简介移动到新位置时，它们阴影的投射位置就是错误的了。可以通过改变这些阴影的模糊半径和透明度来使它们更自然。</p> <pre class="代码无行号"><code>.item:hover.item__img img { box-shadow : 0 5px 15px rgba(0,0,0,.25); } .item:hover .item__description { box-shadow : 0 10px 15px rgba(0,0,0,.5); }</code></pre> <p class="图"><img alt="1824.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/242.jpg"></p> <p class="图题">现在用鼠标划过这个界面来体验3D旋转吧。</p>
