5.6 (案例) translate
2017-06-08 本文已影响0人
柒月柒日晴7
translate.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate</title>
<style type="text/css">
div{
width: 200px;height: 200px;
background: orange;
margin: 10px;
}
div:nth-child(2){
/*transform: translate(-50px,-50px);*/
transform: translateX(50px) translateY(300px);
/*transform:;*/
/*transform: translate(x (left),y (top));
单位 为 px
负数表示 向上或者 向左
transfrom:;(错)
transform:translateX() 表示水平位移 ;
transform:translateY() 表示垂直位移 ;
transform: translate(50px,0); 如果第二个参数不写，表示为0
*/
/* -webkit-transform: translate(50px,100px);
-ms-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);
-o-transform: translate(50px,100px);*/
}
</style>
</head>
<body>
<div></div>
<div class="translate"></div>
</body>
</html>
