缩放scale和移动translate非常相似，缩放中心点：即元素的中心位置

缩放scale和移动translate非常相似，缩放中心点：即元素的中心位置；基数：缩放就是既可以缩小，也可以放大；缩放基数为1，大于1放大，小于1缩小。其也具有三种情况：

1.scale(x,y)元素在水平和垂直方向同时缩放

scale(x[,y])：提供执行[sx,sy]缩放矢量的两个参数，指定一个2D scale（2D缩放），如果第二个参数未提供，则取于第一个参数一样的值，表示X，Y两个方向的缩放倍数一样，并以第一个参数为准。scale（X，Y）用于对元素进行缩放还可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置，其中X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数。其基本语法格式如：transform：scale（2，2.5）。通过案例6-9来体验,效果如图4-13所示。

例6-9   example09.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2D缩放</title>
    <style>
    .demoRotate{ width: 300px; height: 300px; background-color: red;
            transform: scale(1.5,1.2); /*缩放*/
            -webkit-transform: scale(1.5,1.2); /*Chrome, Safari*/
            -moz-transform: scale(1.5,1.2);  /*Firefox*/
            text-align: center;font-size: 20px;
            margin-left: 200px; float:left;
        }
   .demo { width: 400px; height: 400px; background-color: royalblue;
           margin-left: 200px; margin-top: 150px;
                }
    </style>
</head>
<body>
    <div>transform: scale(1.5,1.2);</div>
    <div></div>
</body>
</html>

2.  scaleX(x)x轴缩放

scaleX表示元素只在X轴（水平方向）缩放元素，默认值是（1，1），其基点一样是在元素的中心位置，可以通过transform-origin来改变元素的基点。其基本语法格式如：transform：scaleX(2)。

3.scaleY(y)y轴缩放

scaleY表示元素只在X轴（水平方向）缩放元素，其基点一样是在元素的中心位置，可以通过transform-origin来改变元素的基点。其基本语法格式如：transform：scaleY(2)。

注意：scale可以取负值，负值会让元素翻转并缩放，其基本语法格式如：transform: scale(-1.5,-1.2); /*缩放*/。通过案例6-10来体验仿3D 凸起效果，鼠标移入文字呈现凸起效果，效果如图6-14所示。

例6-10  example10.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>3D文字凸起效果</title>
    <style>
        div.box {
            width: 200px; height: 325px; background-color: #fff;
            transition: all .25s linear; /*过渡效果*/
            display: flex; /*弹性盒子布局*/
            justify-content: center; /*垂直居中*/
            align-items: center; /*水平居中*/
            position: absolute; /*绝对定位*/
            top: 0; right: 0; bottom: 0; left: 0; margin: auto;
                   }
        div.box span {
           color: #ff0000; letter-spacing: 5px; /*字母之间间距*/
           font-size: 30px; font-weight: bold;
           text-shadow: 1px 1px 2px #000;  /*设置字体阴影*/
           transition: all .25s linear; /*过渡*/
        }
        div.box:hover {transform: translateY(-1px); /*变形*/
            box-shadow: 2px 2px 10px 2px #808080; /*设置阴影*/
}
        div.box:hover > span { font-size: 35px;}
    </style>
</head>
<body>
    <div>
        <span>CHINA</span>
    </div>
</body>
</html>
 

 

缩放scale和移动translate非常相似，缩放中心点：即元素的中心位置

                                    

图6-14  3D文字凸起效果

此综合案例使用到过渡(transition)和变形(transform)以及阴影等特效，当鼠标移入实现过渡，变形，阴影的结合使用达到平滑过渡凸起的效果