css3转换：缩放位移旋转倾斜

最新推荐文章于 2022-10-09 23:33:33 发布

东北玛丽的小笔记

最新推荐文章于 2022-10-09 23:33:33 发布

阅读量239

点赞数

分类专栏： H5C3

本文链接：https://blog.csdn.net/weixin_44614856/article/details/88287584

版权

H5C3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

位移：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
}
        .box:hover{
            transition: all 3s;
            //位移     x     y轴
            transform: translate(400px,0);
        }
    </style>
    <title></title>
</head>
<body>
<div class="box"></div>
</body>
</html>

缩放：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
}
        .box:hover{
            transition: all 3s;
            //放大2倍
            transform:scale(2);
        }
    </style>
    <title></title>
</head>
<body>
<div class="box"></div>
</body>
</html>

旋转：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
}
        .box:hover{
            transition: all 3s;
            //旋转45度
            transform:rotate(45deg);
        }
    </style>
    <title></title>
</head>
<body>
<div class="box"></div>
</body>
</html>

倾斜：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
.box{
    width: 100px;
    height: 100px;
    background-color: aqua;
}
        .box:hover{
            transition: all 3s;
            //倾斜45度
            transform:skew(45deg);
        }
    </style>
    <title></title>
</head>
<body>
<div class="box"></div>
</body>
</html>