CSS 2D转换translate() CSS2D转换|CSS2

本文概述

CSS 2D转换
支持的浏览器
translate()方法

CSS3支持transform属性。此transform属性有助于你平移, 旋转, 缩放和倾斜元素。
变换是用于更改形状, 大小和位置的效果。
转换有两种类型, 即CSS3支持2D和3D转换。
CSS 2D转换CSS 2D变换用于将元素的结构更改为平移, 旋转, 缩放和倾斜等。
以下是2D变换方法的列表：

平移（x, y）：用于沿X轴和Y轴变换元素。
translateX（n）：用于沿X轴变换元素。
translateY（n）：用于沿Y轴变换元素。
rotate()：用于根据角度旋转元素。
scale（x, y）：用于更改元素的宽度和高度。
scaleX（n）：用于更改元素的宽度。
scaleY（n）：用于更改元素的高度。
skewX()：它指定倾斜变换以及X轴。
skewY()：指定与Y轴一起的倾斜变换。
matrix()：指定矩阵变换。

支持的浏览器

属性	铬	IE浏览器	火狐浏览器	歌剧	苹果浏览器
transform	36.04.0 -webkit-	10.09.0-毫秒-	16.03.5 -moz-	23.0 15.0 -webkit- 12.1 10.5 -o-	9.03.2 -webkit-
transform-origin（二值语法）	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.03.5 -moz-	9.03.2 -webkit-	23.0 15.0 -webkit- 12.110.5 -o-