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

最新推荐文章于 2022-04-07 17:43:06 发布

东北玛丽的小笔记

最新推荐文章于 2022-04-07 17:43:06 发布

阅读量288

点赞数

CC 4.0 BY-SA版权

分类专栏： H5C3

本文链接：https://blog.youkuaiyun.com/weixin_44614856/article/details/88287584

H5C3 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用CSS的transform属性来实现元素的位移、缩放、旋转和倾斜效果，通过具体的代码示例，展示了:hover状态下元素状态的变化，适用于前端开发者学习和实践。

位移：

<!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>