CSS3变形处理

CSS3中的变形处理,CSS3变形处理

变形分类

  • #### 缩放

    使用scale方法来实现文字或图像的缩放,在参数中指定缩放倍率。例如“scale(0.5)”,表示缩小50

  • #### 倾斜

    使用skew方法来实现文字或图像的缩放,在参数中指定水平方向的倾斜角度与垂直方向的倾斜角度,若只有一个数值,则为水平方向的倾斜角度,单位为deg。

    注:rotate表示的是旋转,仅一个数值,表示水平方向的旋转角度。

  • #### 移动

    使用translate方法来实现文字或图像的移动,在参数中指定水平方向的移动与垂直方向的移动,若只有一个数值,则为水平方向的移动。

对一个元素的多种变形方法

  • #### 格式示例

     1 <!DOCTYPE html>
     2 <html lang="zh-CN">
     3 <head>
     4     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     5     <meta http-equiv="x-ua-compatible" content="IE=edge">
     6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     7     <title>测试</title>
     8 </head>
     9 <body>
    10 <section id="a-section1-3-b">a-section1-3-b</section>
    11 <section id="section1-4-b">section1-4-b</section>
    12 <style>
    13     [id $= 'b']{ /* id以b结尾的 */
    14         background-color: lightpink;
    15         -webkit-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
    16         -moz-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
    17         -ms-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
    18         -o-transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
    19         transform: scale(0.5) skew(30deg, 30deg) translate(30px, 30px);
    20         /*缩小50% 水平垂直方向倾斜30°(rotate只有水平旋转) 水平垂直移动30px*/
    21     }
    22     #a-section1-3-b{
    23         -webkit-transform-origin: left bottom;
    24         -moz-transform-origin: left bottom;
    25         -ms-transform-origin: left bottom;
    26         -o-transform-origin: left bottom;
    27         transform-origin: left bottom;
    28         /*更换变形原点*/
    29     }
    30 </style>
    31 </body>
    32 </html>
    
  • #### 变形基点transform-origin

    这个参数可以改变变形基点,其属性值表示“基准点在元素水平方向上的位置,基准点在元素垂直方向上的位置”。其中“基准点在元素水平方向上的位置”中可以指定的值为left,center,right,“基准点在元素垂直方向上的位置”中可以指定的值为top,center,bottom。

变形分类 缩放
使用scale方法来实现文字或图像的缩放,在参数中指定缩放倍率。例如“scale(0.5)”,表示…

标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图