这个界面即将设计完成，但是你可能已经发现，由于perspective的增加，这些内容简介变得难以阅读了。为了解决这个问题，当鼠标悬停在元素上时，让它正向面对用户就好了。做到这一点，只需要在鼠标悬停时把y轴的旋转值设置为0就可以了。

.item:hover { 
transform : rotateY(0); }

为了获得更极致的效果，我们还将内容简介元素的translateZ属性值从80像素减小为5px，同时将它向右移动20px。

.item:hover .item__description { 
transform : translateZ(5px) translateX(20px); }

当这些内容简介移动到新位置时，它们阴影的投射位置就是错误的了。可以通过改变这些阴影的模糊半径和透明度来使它们更自然。

.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); }

现在用鼠标划过这个界面来体验3D旋转吧。