CSS3缩放scale()示例代码

html 代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3缩放scale()示例代码</title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {
            margin:100px auto;/*水平居中*/
            width:200px;
            height:100px;
            border:1px dashed gray;
            transition:all 1s ease-out; /* 缩放慢慢动作效果 */
        }
        /*设置当前元素样式*/
        #current
        {
            width:200px;
            height:100px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transition:all 1s ease-out;
        }
        #current:hover {
            /*transform:scaleX(1.5);*/
            /*-webkit-transform:scaleX(1.5);  !*兼容-webkit-引擎浏览器*!*/
            /*-moz-transform:scaleX(1.5);     !*兼容-moz-引擎浏览器*!*/
            transform:scale(1.5,1.5);
            -webkit-transform:scale(1.5,1.5);  /*兼容-webkit-引擎浏览器*/
            -moz-transform:scale(1.5,1.5);     /*兼容-moz-引擎浏览器*/
            transition:all 1s ease-out;

        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>
CSS3缩放scale()示例代码

悦读
