CSS中变形效果-transform（平移、旋转、缩放、倾斜）_shao_xuan__css transform

网络 02-07 1625

CSS中变形效果-transform（平移、旋转、缩放、倾斜） CSS3实现变形的优势2-D变形平移translate（）1、缩放scale()2、倾斜skew()3、旋转rotate()4、中心点transform-origin 3-D变形1、旋转rotate3d()2、视距perspective3、transform-style（用于保存元素的3D 空间）4、backface-visibility（定义元素在不面对屏幕时是否可见5、3D转换方法（位移，缩放）兼容性

CSS3实现变形的优势

1、无需加载额外的文件。 2、提高了网页开发者的工作效率。 3、提高了页面的执行速度。在 CSS3 之前，如果需要为页面设置变形效果，需要依赖于图片、Flash或JavaScript 才能完成。 CSS3 出现后，通过 transform属性就可以实现变形效果。 2012年10月， W3C 组织发布了CSS3变形工作草案，这个草案包括了 CSS3 2D变形和CSS3 3D变形。变形效果： CSS3的变形 transform）属性（可以让元素在一个坐标系统中变形。）基本语法格式：

transform：none | transform-functions; transform属性的默认值为 none ，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。

2-D变形平移translate（）

使用translate（）方法能够重新定义元素的坐标，实现平移的效果。基本语法格式： transform:translate（x-value,y-value）; x-value 指元素在水平方向上移动的距离， y-value 指元素在垂直方向上移动的距离。如果省略了第二个参数，则取默认值0 。当值为负数时，表示反方向移动元素。

平移示意图：

1、缩放scale()

scale() 方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。基本语法格式： transform:scale(x-axis,y-axis); x-axis 和 y-axis 参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是反转元素（如文字被反转），然后再缩放元素。如果第二个参数省略，则第二个参数等于第一个参数值。缩放示意图：

2、倾斜skew()

skew()方法能够让元素倾斜显示，该函数包含两个参数值，分别用来定义X轴和Y轴坐标倾斜的角度。基本语法格式： transform:skew(x-angle,y-angle); 参数 x-angle 和 y-angle 表示角度值，第一个参数表示相对于 X轴进行倾斜，第二个参数表示相对于 Y轴进行倾斜，如果省略了第二个参数，则取默认值0。倾斜示意图：

3、旋转rotate()

rotate()方法能够旋转指定的元素对象，主要在二维空间内进行操作。该方法中的参数允许传入负值，这时元素将逆时针旋转。基本语法格式： transform:rotate(angle); 参数 angle 表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。旋转示意图：

4、中心点transform-origin

变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用 transform-origin属性。基本语法格式： transform-origin: x-axis y-axis z-axis; transform-origin属性包含三个参数，其默认值分别为 50% 50% 0 ，各参数的具体含义如下：

3-D变形 1、旋转rotate3d()

基本语法格式： rotate3d(x,y,z,angle); x、y、z可以取值0或1，当要沿着某一轴转动，就将该轴的值设置为1，否则设置为0。Angle为要旋转的角度。

2、视距perspective

perspective属性可以简单的理解为视距，主要用于呈现良好的3D透视效果。例如我们前面设置的3D旋转果并不明显，就是没有设置perspective的原因。基本语法格式： perspective:参数值; perspective 属性参数值可以为 none 或者数值（一般为像素），其透视效果由参数值决定，参数值越小，透视效果越突出。

3、transform-style（用于保存元素的3D 空间）

flat：子元素将不保留其 3D 位置。（默认属性） preserve-3d子元素将保留其 3D 位置。

4、backface-visibility（定义元素在不面对屏幕时是否可见

） visible：背面是可见的。 hidden：背面是不可见的。

5、3D转换方法（位移，缩放）方法名称描述translate3d(x,y,z)定义3D位移translateX(x)定义3D位移，仅使用用于 X 轴的值translateY(y)定义3D位移，仅使用用于 Y 轴的值translateZ(z)定义3D位移，仅使用用于Z 轴的值scale3d(x,y,z)定义 3D 缩放scaleX(x)定义 3D 缩放，通过给定一个 X 轴的值scaleY(y)定义 3D 缩放，通过给定一个 Y 轴的值scaleZ(z)定义 3D 缩放，通过给定一个 Z 轴的值

兼容性