css3中的变换（transform）
时间：2023-03-31 00:35:52
CSS
transform字面意思是改变外观和形状。在css3中，transform主要包括以下几种：1、旋转rotate2。倾斜倾斜3。规模规模4。Movetranslate一起来看看transform的rotate、skew、scale、translate是如何实现的。语法transform:nonetransform:rotate|歪斜|规模|translatenone：表示不进行变换，表示一个或多个变换函数，用空格隔开，表示我们同时对一个元素进行变换的多个属性操作。使用多个属性时，需要有空格分隔1.旋转rotatetransform:rotate();旋转；其中“deg”表示“度”，如“10deg”表示“10度”。rotate()方法通过指定的角度参数（2D旋转）为元素指定一个二维旋转，将元素顺时针旋转给定的度数。允许负值，这样元素逆时针旋转。下面我就以“福”为例html福
css例子：2.SkewSkew有三种情况。skew(x,y)使元素同时在水平和垂直方向倾斜（X轴和Y轴同时倾斜变形一定的角度值）；skewX(x)只使元素在水平方向发生倾斜变形（X轴倾斜变形）；skewY(y)只使元素在垂直方向发生倾斜变形（Y轴倾斜变形）。x,y)水平和垂直缩放元素（即X轴和Y轴同时缩放）；scaleX(x)元素仅水平缩放（X轴缩放）；scaleY(y)元素只在垂直方向缩放（Y轴缩放）但它们有相同的缩放中心点和基点，中心点是元素的中心位置，缩放基数为1，如果值大于1，元素将被放大，否则，如果值小于1，元素将被缩小。4.MovetranslateMovetranslate与skew和scale有相同的三种情况。translate(x,y)同时水平和垂直移动（即X轴和Y轴同时移动）；translateX(x)仅水平移动（X轴移动）；translateY(Y)只在垂直方向移动（Y轴移动）。下面列出了二维变换方法的所有变换属性。如果您有更好的建议，不妨留言讨论，共同进步！再次感谢您耐心阅读本文。vx:bsl521921
