5.6 (案例) translate

作者: 柒月柒日晴7 | 来源:发表于2017-06-08 01:14 被阅读0次

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>