变换transform详解
变换函数
translateX(x):在水平方向移动元素,正值向右移动。
translateY(y):在垂直方向移动元素,正值向下移动。
translate(x,y):在水平和垂直方向移动元素。
scaleX(x):在水平方向缩放元素(1.0是原始大小)。使用负值会将元素绕y轴翻转,创建一个从右到左的镜像。
scaleY(y):在垂直方向缩放元素(1.0是原始大小)。使用负值会将元素绕x轴翻转,创建一个从下到上的镜像。
scale(x,y):在水平和垂直方向缩放元素。
rotate(angle):围绕元素中心顺时针旋转。用负值则逆时针旋转。
skewX(angle):在水平方向倾斜元素。上下边缘仍然水平,左右边缘倾斜。
skewY(angle):在垂直方向倾斜元素。左右边缘不倾斜,上下边缘倾斜。
skew(x-angle,y-angle):在水平和垂直方向倾斜。
matrix(n1,n2,n3,n4,n5,n6):用矩阵乘法来变换元素(其他所有的变换都可以使用矩阵乘法来实现)。
2,变换
变换是一个强大的工具,可以移动、缩放、斜切和旋转元素,扭曲它的外观。要用 transform 属性即可实现变换。
(变换不会影响页面中的其他元素,也不会影响布局。比如通过变换放大某个元素,那么该元素会简单地覆盖相邻元素)
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_987.html
时间: 2024-10-20 14:49:51