切记，当你的过渡属性中包含延迟时间delay时，它一定要出现在持续时间duration之后。

在前面，我们在网页中建立了一个3D界面，并为你留了一个悬念。如果必要的话，回顾一下，因为现在我们要为这些列表项添加过渡和三维空间内的45deg旋转。为了确保用户可以阅读我们的文本，当鼠标悬停时，我们把这些列表项转回原位来面对用户。

.item { 
transform : rotateY(45deg); 
transform-style : preserve-3d; } 

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

这种设置方式，过渡会立即执行。为了让界面的呈现更流畅，添加过渡属性，首先将过渡属性定义为transform。

.item { 
transition-property : transform; }

接下来，指定该过渡需要0.75秒（.75s），时间函数为ease-in-out。

.item { 
transition-duration : .75s; 
transition-timing-function : ease-in-out; }

当我们想减少一些样式表字节大小时，可以将这些属性组合成一条声明。

.item { 
transition : transform .75s ease-in-out; }

为了使3D界面更加具有真实性，通过translateZ属性使它靠近用户80px。然后向左后方移动，调整鼠标悬停时投影的强度。

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

我们将所有的状态变化延迟0.2秒（.2s）启动，持续0.5秒（.5s）。

.item__description { 
transition-property : transform, box-shadow; 
transition-duration : .5s, .5s; 
transition-delay : .2s, .2s; 
transition-timing-function : ease-in-out, ease-in-out; }

这两个属性的过渡使用了同样的持续时间、延时和时间函数。因此我们可以把两个值组合成一个来简化这条声明。

.item__description { 
transition-property : transform, box-shadow; 
transition-duration : .5s; 
transition-timing-function : ease-in-out; }

我们的设计现在看起来更加的流畅，用户交互也更真实。