移动web
平面转换 transform
作用:为元素添加动态效果,一般与过渡配合使用
概念:改变盒子在平面内的形态(位移、旋转、缩放、倾斜)
平面转换又叫 2D 转换
平面转换 – 平移
transform: translate(X轴移动距离, Y轴移动距离);
取值: 像素单位数值 百分比(参照盒子自身尺寸计算结果) 正负均可
注:单独设置 X 或 Y 轴移动距离:translateX() 或 translateY()
平移实现居中效果
旋转
transform: rotate(旋转角度);角度单位是 deg
改变转换原点transform-origin
默认情况下,转换原点是盒子中心点
transform-origin: 水平原点位置 垂直原点位置;
取值 方位名词(left、top、right、bottom、center) 像素单位数值 百分比
多重转换
先平移再旋转
因篇幅问题不能全部显示,请点此查看更多更全内容
Copyright © 2019- huatuoyibo.net 版权所有 湘ICP备2023021910号-2
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务