5.10 (案例) scale

scale.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scale</title>
    <style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background: -webkit-linear-gradient(red 30%,yellow 100%);
        margin: 10px;
        text-align: center;
        line-height: 200px;
        font-size: 20px;
    }
    div:nth-child(2){
        transform:scale(-0.8);
        /*transform:scaleY(-0.8);*/
        /*
        1.transform:scale(0.8,0.5);  2个参数 ，分别表示 水平 方向说法 ，垂直方向缩放， >1 表示放大，< 1 表示缩小
        2.transform:scale(0.8);   1个参数 表示 水平 垂直一起缩放

        3.transform:scaleX(1.2); scaleX 表示 水平方向缩放 

        4.transform:scaleY(1.2); scaleY 表示 垂直方向缩放

        5.transform:scaleX(-0.8); 负数 表示 围绕 Y 轴 垂直轴 翻转 180deg

        6.transform:scaleY(-0.8);负数表示 围绕 x轴 水平轴 翻转180deg



        */
    }
    </style>
</head>
<body>
    <div>我不进行缩放</div>
    <div>我会缩放</div>
</body>
</html>
最后编辑于：2017.12.08 02:16:17
5.10 (案例) scale

推荐阅读更多精彩内容
