CSS 缩放转换简写

演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <style type="text/css">
            #box{
                width: 200px;height: 200px;
                background-color: #ccc;
                margin: 200px auto;
                perspective: 1000px;
            }
            .wyzx{
                width: 100px;height: 100px;
                background-color: #ff0000;
            }
            .wyzx:hover{
                /* 缩放转换 */
                /* 参考自身尺寸的比例 */
                /* 默认基点在元素中心点 */
                /* 默认值1,>1放大;<1缩小 */
                /* 当设置负值,元素翻转 */
                /* transform: scaleX(2); */
                /* transform: scaleX(-2); */
                /* transform: scaleY(0.5); */
                /* transform: scaleY(-0.5); */
                
                /* X轴,Y轴 */
                /* transform: scale(2,3); */
                /* X轴和Y轴一样，可以写一个 */
                /* transform: scale(2); */
                /* X轴，Y轴，Z轴 */
                transform: scale3d(2,3,4);
                
                /* transform: rotateY(45deg); */
                /* 只有3D环境，Z轴缩放才有效果 */
                /* transform: scaleZ(3) rotateY(45deg); */
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="wyzx">
                我要自学
            </div>
        </div>
    </body>
</html>