前端学习笔记85-缩放

最新推荐文章于 2024-01-25 11:20:51 发布

小欣CZX

最新推荐文章于 2024-01-25 11:20:51 发布

阅读量599

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_45034895/article/details/117046428

版权

小白前端学习专栏收录该内容

100 篇文章 7 订阅

订阅专栏

前端学习笔记85-缩放

scale
鼠标移入后图片放大效果
scaleZ
transform-origin

scale

对元素进行缩放。
scaleX（）设置x轴方向的放大倍速。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            transition:2s;
            margin: 100px auto;
        }
        .box1:hover{
            transform: scaleX(2);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述
同理还有scaleY（）
还有scale（），这个是两个方向的缩放。

鼠标移入后图片放大效果

看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .img-wrapper{
            width: 200px;
            height: 200px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
    <div class="img-wrapper">
        <img src="an.jpg"width="100%">
    </div>
</body>
</html>

在这里插入图片描述
鼠标移入后图片有放大的效果。

        img{
            transition:0.2s;
        }
        .img-wrapper:hover img{
            transform: scale(1.2);
        }

在这里插入图片描述
要的效果是图片外框不变，只是内容放大，所以还得改进。

        .img-wrapper{
            width: 200px;
            height: 200px;
            border: 1px red solid;
            overflow: hidden;
        }

在这里插入图片描述

scaleZ

scaleZ()有用吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            perspective:800px;
            
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            transition:2s;
            margin: 100px auto;
        }

        .box1:hover{

            transform:scaleZ(2)
        }

    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

当我们用上面这个代码时，鼠标移入box1，显示效果没有变化。这是为什么？
因为这个缩放缩放的是坐标轴，z轴的缩放在这个box1体现不出来。如果元素在z轴方向有一定尺度，则是有用的。

transform-origin

设置变形的原点。
回到刚刚图片的那个代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .img-wrapper{
            width: 200px;
            height: 200px;
            border: 1px red solid;
            overflow: hidden;
        }
        img{
            transition:0.2s;
        }
        .img-wrapper:hover img{
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div class="img-wrapper">
        <img src="an.jpg"width="100%">
    </div>
</body>
</html>

设置一下变形原点。

        .img-wrapper:hover img{
            transform-origin: 0 0;
            transform: scale(1.2);
        }

在这里插入图片描述
从效果可以看到，变大的参考点变成了左上角。

小欣CZX

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
前端学习笔记85-缩放

前端学习笔记85-缩放scale鼠标移入后图片放大效果scaleZtransform-originscale对元素进行缩放。scaleX（）设置x轴方向的放大倍速。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
复制链接

扫一扫