[分享]css写6变形的代码

在CSS中，使用transform属性可以对元素进行6种变形，这包括：平移（translate）、旋转（rotate）、缩放（scale）、错切（skew）、透视（perspective）、变形原点（...

在CSS中，使用transform属性可以对元素进行6种变形，这包括：平移（translate）、旋转（rotate）、缩放（scale）、错切（skew）、透视（perspective）、变形原点（transform-origin）。

/* 平移 */
transform: translate(50px, 100px);

/* 旋转 */
transform: rotate(45deg);

/* 缩放 */
transform: scale(2, 3);

/* 错切 */
transform: skew(30deg, 20deg);

/* 透视 */
transform: perspective(500px);

/* 变形原点 */
transform-origin: bottom right; 

其中平移是指将元素沿着X轴和Y轴移动。translate()函数接受两个参数，第一个参数是X轴的移动距离，第二个参数是Y轴的移动距离。如果只传递一个参数，默认为X轴的移动距离。

旋转可以将元素绕Z轴旋转。rotate()函数接受一个参数，代表旋转的度数。度数为正数，则顺时针旋转，负数则逆时针旋转。

缩放可以将元素在X轴和Y轴上缩放。scale()函数接受两个参数，第一个参数是X轴上的缩放倍数，第二个参数是Y轴上的缩放倍数。如果只传递一个参数，则默认在X轴和Y轴上缩放相同倍数。

错切可以在X轴和Y轴上分别移动元素的两侧，使之产生倾斜的效果。skew()函数接受两个参数，第一个参数是X轴上的倾斜角度，第二个参数是Y轴上的倾斜角度。如果只传递一个参数，则默认在X轴和Y轴上倾斜相同角度。

透视可以改变元素在 Z 轴的位置，使得元素呈现3D效果。perspective()函数接受一个参数，代表透视的值。透视值越大，元素离视角越远，视觉上越小。

变形原点可以设置元素的变形中心点。 transform-origin属性接受两个值，分别为水平和垂直方向上的偏移量。偏移量的值为百分比或像素值，在元素框的左上角为 (0, 0)。