<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css transform:translate()位移</title>
<style>
/*参考：http://www.lvyestudy.com/css3/css3_9.2.aspx
知识点：
1.*/
* {
padding: 0;
margin: 0;
}
.div1 {
width: 100px;
height: 100px;
background-color: #cccccc;
/*div1向下平移10px。*/
/*transform: translateY(10px);*/
/*div1向右平移100px*/
/*transform: translateX(100px);*/
transform: translate(50px, 100px);/*向右平移 50px, 向下平移 100px。*/
}
.div2 {
width: 300px;
height: 300px;
background-color: #1acd7e;
}
</style>
</head>
<body>
<div class="div1">div1 100x100px</div>
<div class="div2">div2 300x300px</div>
</body>
</html>
01-30
1998
1998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
