关闭

css3-变形transforms

337人阅读 评论(0) 收藏 举报
分类:

语法

 transform: rotate | scale | skew | translate |matrix;

:以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开

2D

旋转 rotate(deg)//值为正时顺时针,为负时,逆时针

移动translate(x,y)//若第二参数没写,默认为0

       translateX(x)

       translateY(y)

缩放 scale(x,y)//若第二参数没写,则与第一个相同

        scaleX(x)//缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小

        scaleY(y)



扭曲 skew(x,y)/第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度,若第二参数没写,默认为0

       skewX(x)

       skewY(y)


矩阵 matrix,不常用

基点默认为元素的中心点,可以根据transform-origin进行改变基点,只有上面用过transform属性,该属性才能生效(一般在旋转,斜切,缩放中用到)

transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默认点是元素的中心点。

其中X和Y的值可以是百分值,em,px,其中X也可以是字符参数值left,center,right;Y和X一样除了百分值外还可以设置字符值top,center,bottom

 

1、top left | left top 等价于 0 0 | 0% 0%

2、top | top center | center top 等价于 50% 0

3、right top | top right 等价于 100% 0

4、left | left center | center left 等价于 0 50% | 0% 50%

5、center | center center 等价于 50% 50%(默认值)

6、right | right center | center right 等价于 100% 50%

7、bottom left | left bottom 等价于 0 100% | 0% 100%

8、bottom | bottom center | center bottom 等价于 50% 100%

9、bottom right | right bottom 等价于 100% 100%


兼容性



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:55675次
    • 积分:934
    • 等级:
    • 排名:千里之外
    • 原创:40篇
    • 转载:2篇
    • 译文:1篇
    • 评论:3条
    文章分类
    最新评论