css常见几种元素转换(缩放、位移、旋转、倾斜)

一:缩放

缩放:scale

作用:使元素在形状上发生改变

属性:scale   

格式 :  transform:scale(X,Y)

x:表示水平方向缩放倍数

y:表示垂直方向缩放倍数

注意:缩放只是一种视觉效果,不会对别的块元素(盒子)造成影响,取值大于1时表示放大,小于1时表示缩小,如果只写一个数值则表示等比缩放

                                               

                                                           

鼠标点击效果,被放大2倍

                                                         

二:位移

属性:translate

格式:transform:translate(X轴位移量,Y轴位移量)

水平位移量为正,向右移动,为负,则向左移动。垂直位移量方向为下

只写一个值,表示水平位移,参数为百分比时,是相对于自己的宽高。

位移只是一种视觉效果,不会对别的盒子造成影响。

                                                         

三:旋转

属性:rotate

格式:transform:rotate(角度(单位:deg))

角度值为正值时,顺时针旋转,为负值时逆时针旋转。

                                                             

转换旋转中心点:transform——origin:水平坐标,垂直坐标

                   取值:px       

                   方向:center 、left、 right、top、bottom                                                           

注意:

       transform 可以 书写多个转换,中间用空格隔开

       书写顺序的不同,可能会出现不同的结果

       如果旋转和位移一起书写,旋转在前,位移在后 则表示先旋转,再在旋转后的方向上进行位移

       如果位移在前,旋转在后 则表示 先位移再旋转。

四:倾斜

属性:skew

格式:transform:skew(水平倾斜角度,垂直倾斜角度(单位:deg))

正值:顺时针倾斜    负值:逆时针倾斜

两个角度相交,不能大于等于90度

                                                                          

倾斜效果

                                                         

注意:

         转换操作不会影响到其他元素;

         只能添加给块元素,不能添加给行内元素;

         同时添加多个变形操作,先执行前面的,再执行后面的

         多个变形操作必须写在一个 transform 属性后面,书写多次 transform 属性时,后面的会层叠掉前面的

猜你喜欢

转载自blog.csdn.net/JLX981314/article/details/115308183
今日推荐