标题的平移效果怎么出不来啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<figure class="test1">
<img src="images/mm1.jpg"/>
<figcaption>
<h2>海贼王</h2>
<p>我要成为</p>
<p>海贼王一样的男人</p>
<p>ohhhhhhh Yeah</p>
<div></div>
</figcaption>
</figure>
<figure class="test2">
<img src="images/mm2.jpg"/>
<figcaption>
<h2>海贼王</h2>
<p>我要成为</p>
<p>海贼王一样的男人</p>
<p>ohhhhhhh Yeah</p>
<div></div>
</figcaption>
</figure>
<figure class="test3">
<img src="images/mm3.jpg"/>
<figcaption>
<h2>海贼王</h2>
<p>我要成为</p>
<p>海贼王一样的男人</p>
<p>ohhhhhhh Yeah</p>
<div></div>
</figcaption>
</figure>
</body>
</html>
@charset "utf-8";
/* CSS Document */
/*设置总体的样式，图片、标题的样式*/
body,figure,figcaption,h2,p{margin: 0;padding: 0;}
body{background-color:#CCC;}
/*给图片加一个动画*/
figure img{opacity:0.8;}//设置图片的透明度
/*添加一个动画时间，运用了transition属性*/
figure figcaption p{transition:all 0.35s;}
/*设置标题的位置*/
figure{position:relative;width:33.33%;overflow:hidden;height:191px;float:left;}
figcaption{position:absolute;top:0px;left:0px;color:#f90;}
/*figure figcaption p{background-color:#FFF;font-family:"微软雅黑";font-size:12px;margin:3px;}*/
@media screen and (max-width:600px){
figure{width:100%}
}
@media screen and (min-width:601px) and (max-width:1000px){
figure{width:50%}
}
@media screen and (min-width:1001px){
figure{width:33.33s%}
}
/*第一张图片的设置*/
.test1{background:#0FF;}
/*对第一张图p标签的动画设置*/
.test1 figcaption p{background-color:#FFF;font-family:"微软雅黑";font-size:12px;margin:3px;text-align:center;transform:translate(-120px,0px);}
.test1 figcaption {padding:20px;}
/*鼠标经过的设置*/
.test1:hover figcaption p{transform:translate(0px,0px);}
