CSS——变形
定义
变形(Transform-)属性是一些对HTML元素进行线性仿射变形相关的CSS属性。
概述
变形包括2D变形和3D变形。
具体常用的2D变形有以下5种：
- 伸缩(scale) 使元素以相同的缩放中心点和基数沿水平方向、垂直方向或两个方向同时缩放。其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。
- 扭曲(skew) 使元素按一定的角度值在水平方向、垂直方向或两个方向同时扭曲变形。
- 旋转(rotate) 使元素以某个基点按一定的角度值进行旋转。
- 移动(translate) 使元素沿水平方向、垂直方向或两个方向同时移动。
- 矩阵(matrix) 使元素按矩阵进行2D变形。
3D变形在2D变形的基础上增加了z坐标的变换。
列表
元素 | 描述 |
|---|---|
transform | transform 属性规定元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。值包含（translate()，scale()，rotate(),skew(),perspective()等）。 |
<transform-function> | 规定一个为了改变元素显示效果而应用到该元素上的函数，这些变换函数通常代表一类矩阵，最终如何显示出来决定于这些函数矩阵和元素每个点相乘的结果。 |
transform-origin | transform-origin 属性更改元素变形的原点。例如，rotate()的transform-origin 是旋转的中心点 (这个属性的应用原理是先用这个属性的负值translate该元素，进行变形，然后再用这个属性的值把元素translate回去)。 |
transform-style | transform-style规定该元素的嵌套元素如何在3D空间中呈现。 |
变更点
变形属性全部是CSS3新增加的。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-09-27，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读