CSS transform 是 CSS3 的特性之一，它提供了一种改变元素形状和位置的方法，可以为网页增加更多的动态效果和交互方式，更加灵活地呈现出设计师的创意。
一、translate 偏移变换
translate() 是 translateX() 和 translateY() 的组合，它们用来移动元素的位置。
transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);
translate() ，接收两个参数，第一个参数是 x 轴偏移量，第二个参数是 y 轴偏移量，如上述代码，将元素向 x 轴方向移动了 50 像素，向 y 轴方向移动了 100 像素；而 translateX() 和 translateY() 只是单独作用于 x 轴或 y 轴移动。
二、scale 缩放变换
scale() 用来缩放元素的大小，可接收一个或两个参数，分别表示横向和纵向的缩放比例。
transform: scale(0.8);
transform: scaleX(0.8);
transform: scaleY(0.8);
scale() 可以同时缩放横向和纵向，也可以只缩放横向或纵向，如上述代码，分别表示缩略 20%，只缩小了横向或纵向的比例。
三、rotate 旋转变换
rotate() 用来旋转元素，值为角度数，正值表示向右旋转，负值表示向左旋转。
transform: rotate(45deg);
如上述代码，表示将元素向右旋转 45 度。同时如果需要逆时针旋转则使用负值。
四、skew 倾斜变换
skew() 用来倾斜元素，可接收一个或两个参数，分别为 x 轴和 y 轴。
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(20deg);
如上述代码所示，表示在 x 和 y 轴上分别倾斜 30 度和 20 度，也可以单独作用于某一个轴，如 skewX() 只对 x 轴倾斜，skewY() 只对 y 轴倾斜。
五、matrix 矩阵变换
matrix() 用来实现多个变换效果，接收一个由 6 个值组成的数组作为参数，分别表示变换的系数，此系数是由一系列函数计算出来的。
transform: matrix(a, b, c, d, e, f);
其中 a、d 为水平和垂直缩放比例，b、c 为倾斜度数，e、f 为水平和垂直方向的偏移量。
总结
以上是常用的几种 CSS transform 变换方法，它们的运用可以让网页更加生动、灵活，提升网页体验，尤其在移动端应用。通过使用 CSS transform，不仅可以让网页交互更加出彩，更可以减少页面渲染的负担，提高网页的加载速度，让用户在浏览时更加流畅舒适。
原创文章，作者：PRPB，如若转载，请注明出处：https://www.506064.com/n/148752.html
微信扫一扫 
支付宝扫一扫 