☆transform-origin 属性(字符参数值与百分值)
transform-origin: x-axis y-axis z-axis;
•x-axis,表示水平方向上的取值,字符参数值对应的百分值为left=0%;center=50%;right=100%。
•y-axis,表示竖直方向上的取值,字符参数值对应的百分值为top=0%;center=50%;bottom=100%。
•z-axis,表示视图被置于 Z 轴的何处,用于3D变形中
☆
border-radius:
左上,右上,右下,坐下;
如果只提供了三个值:1 2 3 则第4个值和第2个值相同。如果只提供了二个值:1 2 则1 3相同,2 4值相同。
border-radius可以单独设置水平和垂直的半径,只需要用一个斜杠(/)分隔这二个值就行。
为四个角设置不同的水平和垂直半径,方法就是在斜杠前指定一到四个值,斜杠后指定一到四个值。
例如:border-radius: 100% 0 0 100%/ 50%;
☆ rotate:旋转
用法:transform: rotate(45deg);正数为顺时针旋转,负数为逆时针旋转。
skew:倾斜
用法:transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
参数表示倾斜角度,单位deg。skew的默认原点transform-origin是这个物件的中心点
- 一个参数时:表示水平方向的倾斜角度;
- 两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。