网页|你不知道的HTML——transform

问题描述

在之前写的如何打印用六边形组合的蜂窝状图形的博客中，有简单的提到transform标签。但是对于这个属性的值，并没有怎么简介。今天就来学习了解一下transform标签吧！

解决方案

Transform的意思是使什么改变形态; 使什么改变外观(或性质); 使改观等。在HTML中，我们可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。

Transform常见的属性包括：rotate、 skew、scale、translate 。需要注意的就是这些属性还有x轴、y轴的区分，比如：rotatex() 和 rotatey()。当我们使用transform对元素进行旋转、缩放、倾斜、移动时，我们需要考虑transform的优先级。即rotate，scale，skew，translate。

图2.1

下面就来了解一下这四个属性：

（1）rotate（旋转）用法：transform: rotate(xxdeg)。

单位deg为单位度的意思，正数为顺时针旋转，负数为逆时针旋转，。

（2）scale（缩放）用法：transform: scale(0.5)；transform: scale(0.5, 2)。

这里的参数表示缩放倍数。一个参数时表示水平和垂直同时缩放该倍率

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

（3）skew（倾斜）用法：transform: skew(30deg)； transform: skew(30deg, 30deg)。

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

需要特别提醒的是skew的默认原点transform-origin是这个图像的中心点。但是图像的中心点（基准点）是可以改变的。用法是transform-origin: 10px 10px。表示相对左上角原点的距离。第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离。两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。

（4）translate（移动）用法：transform: translate(45px) ；transform: skew(45px, 150px)。参数表示移动距离。一个参数时：表示水平方向的移动距离。两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

结语

Html相对于其他的程序语言是要简单些。但是了解容易，精通难。不论对待任何学习的东西，我们都要认真对待。

END

主 编 | 张祯悦

责 编 | 刘 连