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 属性时,后面的会层叠掉前面的
djiq: 没啥用,就算播放了,会自动全屏
qq_39378256: 微信内还是没办法实现自动播放
蚂蚁驰江河: 一样会报错
cyt_web: ios无法自动播放
芒果味的葡萄: el-menu-item 循环的时候不应该再加这个parentRoute.path了吧,加上以后发现点击跳转的路径不对,直接跳到404页面。