height: 100px; border: 1px solid red; background-color: #cccccc; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
2D 缩放 - scale（）
scale() 方法用于改变元素的尺寸。
- 根据给定的高度和宽度。
scale(x) 或者 scale(x,y)
- 一个参数时，第二个参数默认和第一个一样。
可取值
- 默认为1
- 缩小：0到1之间的数值。
- 放大：大于1的数值。
也可以使用单向缩放函数
- scaleX(x)
- scaleY(y)
案例代码
2D 旋转 - ratate()
rotate() 方法用于旋转元素。
- 根据原点，将元素按照顺时针旋转给定的角度。
- 允许负值，元素将按逆时针旋转。
rotate(deg)
案例代码
2D 倾斜 - skew()
skew() 方法用于让元素倾斜。
- 以原点位置，围绕 X 轴和 Y 轴按照一定角度倾斜。
- 可能会改变元素形状。
skew(x) 或者 skew(x,y) ，取值为角度。
也可以使用单向倾斜函数
- skewX(x)
- skewY(y)
案例代码
3D 转换 - perspective
perspective 属性定义 3D 元素距视图的距离，单位像素。
- 为元素定义 perspective 属性时，子元素会获得透视效果，而不是元素本身。
- 只影响 3D 转换元素。
浏览器兼容性
- Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
案例代码
Lorem ipsum.
