CSS3属性transform功能介绍

小鱼儿 2024-03-29 16:29 82阅读 0赞

![2bc7e44c0061b0d1dde283f48ad7d212.jpeg][]

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

在[CSS3][]中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。

**一.旋转 rotate**

用法：transform: rotate(45deg);

共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

**二.缩放 scale**

用法：transform: [scale][](0.5) 或者 transform: scale(0.5, 2);

参数表示缩放倍数；

一个参数时：表示水平和垂直同时缩放该倍率

两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

**三.倾斜 skew**

用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);

参数表示倾斜角度，单位deg

一个参数时：表示水平方向的倾斜角度；

两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

关于skew倾斜角度的计算方式表面上看并不是那么直观，这里借鉴某大拿绘制的图举例说明一下：

首先需要说明的是skew的默认原点transform-origin是这个物件的中心点

**四.移动 translate**

用法：transform: translate(45px) 或者 transform: translate(45px, 150px);

参数表示移动距离，单位px，

一个参数时：表示水平方向的移动距离；

两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

**五.基准点 transform-origin**

在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

用法：transform-origin: 10px 10px;

共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；

两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。

**六.多方法组合变形**

上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法，这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

这四种变形方法顺序可以随意，但不同的顺序导致变形结果不同，原因是变形的顺序是从左到右依次进行，这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate

[2bc7e44c0061b0d1dde283f48ad7d212.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/6109cd636d2348e28b304715e5f01439.png
[Link 1]: https://www.weidianyuedu.com/
[CSS3]: https://so.csdn.net/so/search?q=CSS3&spm=1001.2101.3001.7020
[scale]: https://so.csdn.net/so/search?q=scale&spm=1001.2101.3001.7020

发表评论取消回复

表情：

评论列表（有 0 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读

相关关于CSS3属性transform介绍

在[CSS3][]中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一.旋转 rotate

太过爱你忘了你带给我的痛/ 2024年04月03日 13:10/ 0 赞/ 78 阅读

相关 CSS3属性transform功能介绍

![2bc7e44c0061b0d1dde283f48ad7d212.jpeg][] 转自：[微点阅读][Link 1] [https://www.weidianyuedu.

小鱼儿/ 2024年03月29日 16:29/ 0 赞/ 83 阅读

相关 CSS3:text-shadow属性、word-wrap属性、transform属性、transition属性、animation属性、3D变换：transform-style:preserve-3d

text-shadow属性： text-shadow属性:水平偏移垂直偏移阴影大小颜色 word-wrap属性： word-wrap属性：允许长单词、URL

浅浅的花香味﹌/ 2024年03月24日 16:08/ 0 赞/ 26 阅读

相关深度解析 CSS3 transform-origin 属性

1.前言 CSS3（Cascading Style Sheets Level 3）是一种用于定义网页样式的标记语言，它的发展旨在提高样式表的设计能力和对文档的表现控制。在

冷不防/ 2024年02月05日 23:44/ 0 赞/ 22 阅读

相关 CSS3新增转换属性transform

transform之translate transform:translate(x,y) transform:translateX() transfor

以你之姓@/ 2022年12月18日 04:53/ 0 赞/ 226 阅读

相关 css3是什么 ptml_CSS3 transform 属性

div \{ transform:rotate(7deg); \-ms-transform:rotate(7deg); /\ IE 9 \/ \-moz-transfo

浅浅的花香味﹌/ 2022年10月26日 14:26/ 0 赞/ 203 阅读

相关 CSS3 transform旋转属性

目前越来越多的浏览器兼容CSS3标准了，CSS3里有一个使对象旋转的属性transform rotate，号称兼容CSS3的浏览器对它的支持也不算好，好在Firefox、Web

逃离我推掉我的手/ 2022年04月14日 07:07/ 0 赞/ 332 阅读

相关 CSS3 transform

最初这个效果是在[Playnext.cn][]看到的，感觉挺好玩，今天就跟大家分享一下，用CSS3怎么来实现这个效果。先来看下我做的demo [Hello 二货][Hello

谁借莪１个温暖的怀抱￠/ 2021年12月12日 02:37/ 0 赞/ 303 阅读

相关 CSS3中的transform转换属性

属性 transition-property 定义对象中参与过度的属性 transition-delay 延迟 transition-duration

布满荆棘的人生/ 2021年10月29日 07:34/ 0 赞/ 350 阅读

相关 CSS3 transform 属性

实例旋转 `div` 元素： div { transform:rotate(7deg); -ms-transform:rotate(

小鱼儿/ 2021年06月26日 16:06/ 0 赞/ 451 阅读