transform:translate 什么意思
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrap{ width:400px; height:200px; position:relative;border:2px solid #999; overflow:hidden;}
.col{ width:400px; height:200px; position: absolute; z-index:1; background:#272727; opacity:0; text-align:center;}
p a{font-size:20px; font-family:"微软雅黑"; text-decoration:none; color:#fff; line-height:500px;}
.wrap:hover .col{transition:all 1s ease-in-out;opacity:0.8; }
.wrap .col a{transform:translate(0,0px); display:block;}
.wrap:hover .col a{ transform:translate(0,-100px); -webkit-transform:translate(0,-100px);transition:all 1s ease; -webkit-transition:all 1s ease;}
.wrap:hover img{ transform:scale(1.2); transition:all 1s linear;}
</style>
</head>
<body>
<div class="wrap">
<div class="col">
<p><a href="#">《带你回来.mp3》</a></p>
</div>
<img src="../css3/h5.jpg" width="400" height="200" alt="121"/>
</div>
</body>
</html>
ljgty2回答
-
blovetu
含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。.demo_transform4{ -webkit-transform:translate(120px,0); -moz-transform:translate(120px,0)} -
刚毅87
transform:translate (50px,100px),向右偏移50px, 向下偏移100px;
随时随地看视频慕课网APP
相关分类
CSS3