码迷,mamicode.com
首页 > 其他好文 > 详细

第98天:变换transform详解

时间:2017-11-29 00:13:18      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:简单   http   hang   函数   com   矩阵乘法   bsp   使用   mat   

变换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

第98天:变换transform详解

标签:简单   http   hang   函数   com   矩阵乘法   bsp   使用   mat   

原文地址:http://www.cnblogs.com/le220/p/7912739.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!