transform:translate 什么意思

<!doctype html>

<html>

<head>

<title>无标题文档</title>

*{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>

</div>

</body>

</html>

ljgty

浏览 3673回答 2

blovetu

含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。.demo_transform4{ -webkit-transform:translate(120px,0); -moz-transform:translate(120px,0)}

刚毅87

transform:translate (50px,100px),向右偏移50px, 向下偏移100px;

随时随地看视频慕课网APP