CSS之Transform_html/css_WEB-ITnose

我们利用css3中的transform可以实现文字或图像的旋转、缩放、倾斜和移动四种类型的变形处理。

本文使用的是标准的transform,亦可以使用各个浏览器对应私有的属性。对应如下

  • -webkit-transform
  • -moz-transform
  • -o-transform

不过在我的电脑上用transform效果相同,Chrome 49 Firefox 46 IE 10

一、旋转(rotate)

    <meta charset="UTF-8">    Document    <style>        img:hover{            transform: rotate(90deg);        }    </style><body>    

语法格式如下:

rotate(angle)

旋转角度单位有:

  • deg 指角度制,一周的角度是360°,直角是90°
  • grad 指百分度制,一周的角度是400,直角是100
  • turn 圈, 1turn代表旋转一圈
  • rad 指弧度制,一周的角度是2π,直角是π/2

转换比例为: 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

二、缩放(scale)

    <meta charset="UTF-8">    Document    <style>        img:hover{            transform: scale(1,-1)        }    </style><body>    

语法格式如下:

scale(number,[number2])

number2是可选的,如果未设置,则与默认与number相同。number可以为正数、负数、小数。

我们将number分为两部分,正负号(+,-)和数值(number的绝对值)。负号(-)意味着元素要被旋转180度,数值部分大于1则放大,小于一则缩小,等于一既不放大又不缩小,为零时消失。

三、移动(translate)

    <meta charset="UTF-8">    Document    <style>        img:hover{            transform: translate(2in,5cm)        }    </style><body>    

语法格式如下:

translate(value1,[value2])

第一个参数表示相对于原位置X轴偏移距离,第二个参数表示相对于Y轴偏移个距离,如果省略了第二个参数,则默认为0。正数向右和下偏移,负数向左和上偏移。

距离的单位有:

  • 绝对长度单位
    • px
    • in
    • cm
    • mm
  • 相对字体长度单位
    • em
    • rem
    • pt
    • pc
    • ex
    • ch
  • 可视区百分比长度单位
    • vw
    • vh
    • vmin
    • vmax
  • 离奇的长度单位
    • %(百分比)

关于这些长度单位,这有一篇很好的介绍链接http://www.w3cplus.com/css/the-lengths-of-css.html,本段也是参照此链接,不过提示大家,浏览器的版本也在不断的迭代,有些特性需要自己去验证,比如vmax属性在我的chrome浏览器下也行正常运行。

四、倾斜(skew)

    <meta charset="UTF-8">    Document    <style>        img:hover{            transform: skew(30deg,-0.1turn)        }    </style><body>    

语法格式:

skew(angle,[angle])

第一个参数表示相对于X轴进行倾斜,第二个参数相对于Y轴进行倾斜,如果省略了第二个参数,则默认为0。

rotate函数只是旋转,不改变元素的形状,但skew函数会改变元素的形状。

五、变形

    <meta charset="UTF-8">    Document    <style>        img:hover{            transform: matrix(1,0.4,0,1,0,0)        }    </style><body>    

matrix()函数是一个3x3的矩阵,将旧的参数转换成新的参数。

目前,我对此也不是很了解,大家如有兴趣自行Google。

六、Transform-origin

CSS变形的原点默认是对象的中心点,如果要改变这个中心点,可以使用transform-origin属性进行定义。

    <meta charset="UTF-8">    Document    <style>        img:hover{            /*以左上角为原点旋转*/            transform-origin: top left;            transform: rotate(30deg);        }    </style><body>    

语法格式:

transform-origin:[ [ | | left | center | right ][ | | top | center | buttom ] ? ] | [ [ left | center | right ] || [ top | center | bottom ]]

transform-origin属性的初始值是50%,50%,使用与块状元素和内联元素。transform-origin接受连个参数,他们可以是百分比、em、px等具体值也可以是left、center、right,或者top、middle、bottom等描述性关键字。

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: