CSS -- 2D转换

愛 / 滥 / 時

已于 2022-08-24 16:15:11 修改

阅读量261

点赞数 2

分类专栏： CSS 前端文章标签： css css3 html 前端动画

于 2022-07-30 10:07:26 首次发布

本文链接：https://blog.csdn.net/qq_48802092/article/details/126046198

版权

本文详细介绍了CSS的2D转换，包括旋转、平移、缩放、综合转换连写格式、形变中心点和旋转轴向。通过transform属性实现元素的视觉变换，如rotate()用于旋转，translate()用于平移，scale()用于缩放。同时，文章还讲解了如何使用transform-origin调整形变中心点，以及rotateZ(), rotateX()和rotateY()定义围绕不同轴的旋转。另外，perspective属性用于在3D空间中创建透视效果。" 117769913,9264997,自动化运维：磁盘空间清理脚本设定,"['运维', '自动化运维', '清理空间脚本']

摘要由CSDN通过智能技术生成

2D转换模块

transform 属性向元素应用从2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜。

-旋转 rotate

transform: rotate(45deg); 其中deg是单位, 代表多少度

如果是角度值为负，则沿逆时针旋转。

<!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>
        div{
            width: 200px;
            height: 100px;
            margin: 100px auto;
            background-color: aquamarine;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div>旋转：rotate</div>
</body>
</html>

-平移 translate

transform: translate(100px, 0px); 第一个参数:水平方向第二个参数:垂直方向

两个参数之间记得用逗号隔开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

最低0.47元/天解锁文章

愛 / 滥 / 時

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS -- 2D转换

第一个参数水平方向第二个参数垂直方向注意点如果取值是1,代表不变如果取值大于1,代表需要放大如果取值小于1,代表需要缩小如果水平和垂直缩放都一样,那么可以简写为一个参数。属性定义3D元素距视图的距离，以像素计，该属性允许改变3D元素查看3D元素的视图，当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。transform-origin第一个参数水平方向第二个参数垂直方向。如果是角度值为负，则沿逆时针旋转。...
复制链接

扫一扫

专栏目录