CSS3中的变形处理——transform功能(旋转、缩放、倾斜、移动)_百度...
发布网友
发布时间：2024-09-17 06:31
共1个回答
热心网友
时间：2024-09-29 05:00
旋转效果使用rotate方法实现，旋转角度后跟单位“deg”，旋转方向为顺时针。如transform：rotate（45deg）；
缩放效果使用scale方法，参数为缩放倍率，例如transform：scale（0.5）；缩小至原尺寸的一半。可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率，如transform：scale（0.5，2）；水平缩小一半，垂直放大两倍。
倾斜效果使用skew方法，参数为水平倾斜角度和垂直倾斜角度，transform：skew（30deg，30deg）；实现元素对角线上以30度倾斜。使用一个参数时，视为水平倾斜，垂直默认不倾斜，如transform：skew（30deg）；
移动效果使用translate方法，参数为水平和垂直移动距离，transform：translate（50px，50px）；移动元素到原坐标值各增加50px的位置。一个参数时视为水平移动，垂直默认不动，如transform：translate（50px）；
使用transform：translate（150px，200px） rotate（45deg） scale（1.5）；可以对一个元素实现多种变形。通过transform-origin属性改变变形基准点位置。
3D变形功能允许围绕X轴、Y轴、Z轴旋转，缩放以及倾斜效果，使用rotateX、rotateY、rotateZ、scaleX、scaleY、scaleZ、skewX、skewY、translateX、translateY、translateZ方法实现。
2D变形由一个3x3矩阵表示，3D变形由一个4x4矩阵表示。多个变形可通过矩阵相乘实现复合效果。例如矩阵：matrim（1，0,0,1，150，150）与transform：translate（150px，150px）效果一致；3D缩放变形通过矩阵实现，scale3d（0.8,0.5,1）与transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1)效果相同。通过矩阵可以实现任意变形处理。
