CSS 2D缩放

作者: Kkite | 来源:发表于2019-11-30 22:50 被阅读0次

CSS3 2D转换
web学习:05-CSS3转换
CSS3 2D转换、3D转换
6_动画_其他属性
CSS 2D缩放
HTML中如何使用 CSS 实现元素 2D 转换
CSS3--2D转换
7. css动画-页面特效
CSS动画
css3(5)

缩放 scale(x,y)

transform(0.8,1);
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认的值为1，当设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

案例代码一：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片的缩放</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
        }
        div:hover{
            transform: scale(2);        /*x 水平缩放  y垂直缩放 如果只写一个参数 宽度和高度都缩放*/
        }
    </style>
</head>
<body>
    <div>
        
    </div>
</body>
</html>

案例效果：

scale.gif

案例代码二：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        section{
            width: 428px;
            height: 289px;
            margin: 100px auto;
            overflow: hidden;  /*溢出隐藏*/
            border: 1px solid red;
        }
        section img{
            transition: all 1s; /*图片做缩放，所以对图片用transition*/
        }
        section:hover img{  /*鼠标经过section的时候，里面的img缩放*/
            transform: scale(1.4);
        }
    </style>
</head>
<body>
    <section>
        <img src="./earth.jpg" width="428" height="289">
    </section>
</body>
</html>

案例二效果：