css中transform的使用
1.对于行内元素是无效的
2.会保留原来的位置,提高盒子的层级 与relative相对定位类似
transform: translate(X,Y)
1.填入具体数值,例如 translate(10px,10px) ,需要填写单位,元素将会向右位移10px,向下位移10px;
其中如果数值为负数,则位移的方向相反
2.填入百分比数字,例如 translate(10%,10%) ,元素将会向右位移 自身元素 的width 10%距离和向下位移 自身元素 的height 10%距离
transform: rotate(X);
需要在X位置填写相对应的旋转角度,并带上单位deg,例子: rotate(90deg)
元素将会默认在自身的垂直水平居中点进行旋转对应的X度
transform-origin: X Y
可以通过改变元素的该属性,导致元素旋转的原点进行改变
1.填入的X Y值为方位名词,例如top\bottom\left\right
例子: transform-origin: left top; 元素将在元素的左上角为原点进行旋转运动
transform: scale(X);
可以通过改变元素的该属性,导致元素进行X倍的缩放;X为负数时将会产生镜面效果
例子: transform: scale(1.2); 元素将变为原来的1.2倍.
transform连写,如果有发生平移,都需要先写平移属性
例子 transform: translateX(300%) rotate(360deg);
可以在发生transform的元素中设置transition属性
例子: transition: 1s; 代表触发元素发生变化后,变化将于1s内完成
