您的位置:首页 > Web前端 > > 正文

制作css3动画应使用哪个样式属性(CSS3中Transform动画属性用法详解)

更多 时间:2022-01-27 01:51:10 类别:Web前端 浏览量:637

制作css3动画应使用哪个样式属性

CSS3中Transform动画属性用法详解

css3在原来的基础上增加了变形和动画相关的属性,动画三兄弟:transform、transition和animation,通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性,各大浏览器支持方面还不是特别好,使用时要特别注意浏览器的兼容性,本文重点介绍Transform的使用方法,具体内容如下

浏览器支持情况:

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

2D transform变换方法

制作css3动画应使用哪个样式属性(CSS3中Transform动画属性用法详解)

•translate(x, y)方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。x, y的值可以取正负,分别表示表示向不同的方向偏移。
 •rotate(angle)方法, 表示旋转angle角度。angle为正时,按顺时针角度旋转,为负值时,元素逆时针旋转。
 •scale(x, y)方法,表示元素在x轴和y轴上的缩放比例,参数大于1时,元素放大,小于1时,元素缩小。
 •skew(x-angle,y-angle)方法,用来对元素进行扭曲变行,第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数,如果没有设置第二个参数,那么Y轴为0deg
 •matrix(n,n,n,n,n,n)方法, 以一个含六值的变换矩阵的形式指定一个2D变换,此属性值使用涉及到数学中的矩阵,感兴趣的读者可以深入了解一下,这里就不做详细介绍了。
 
下面是上面方法的演示:

  • XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>transform 2D演示</title>  
    6.     <style type="text/css">  
    7.         #container{   
    8.             width: 700px;    
    9.             height: 120px;    
    10.             border: 1px solid blue;    
    11.             margin: 20px auto;    
    12.             padding: 20px 20px;   
    13.         }   
    14.         #li1 ,#li2, #li3, #li4{   
    15.             height: 100px;    
    16.             width: 100px;    
    17.             border: 1px dashed red;   
    18.             display: inline-block;   
    19.         }   
    20.         #li1 li{   
    21.             height: 100px;   
    22.             width: 100px;    
    23.             background: #63F7ED;    
    24.             transform:translate(20px,10px);         /* W3C标准 */   
    25.             -ms-transform:translate(20px,10px);     /* IE 9 */   
    26.             -moz-transform:translate(20px,10px);    /* Firefox */   
    27.             -webkit-transform:translate(20px,10px); /* Safari 和 Chrome */   
    28.             -o-transform:translate(20px,10px);      /* Opera */   
    29.         }   
    30.         #li2{margin-left: 50px;}   
    31.         #li2 li{   
    32.             height: 100px;   
    33.             width: 100px;    
    34.             background: #63F7ED;   
    35.             transform:rotate(45deg);        /* W3C标准 */   
    36.             -ms-transform:rotate(45deg);    /* IE 9 */   
    37.             -moz-transform:rotate(45deg);   /* Firefox */   
    38.             -webkit-transform:rotate(45deg); /* Safari 和 Chrome */   
    39.             -o-transform:rotate(45deg);         /* Opera */   
    40.         }   
    41.         #li3{margin-left: 100px;}   
    42.         #li3 li{   
    43.             height: 100px;   
    44.             width: 100px;    
    45.             background: #63F7ED;   
    46.             transform:scale(2,0.5);         /* W3C标准 */   
    47.             -ms-transform:scale(2,0.5);     /* IE 9 */   
    48.             -moz-transform:scale(2,0.5);    /* Firefox */   
    49.             -webkit-transform:scale(2,0.5); /* Safari 和 Chrome */   
    50.             -o-transform:scale(2,0.5);      /* Opera */   
    51.         }   
    52.         #li4{margin-left: 100px;}   
    53.         #li4 li{   
    54.             height: 100px;   
    55.             width: 100px;    
    56.             background: #63F7ED;   
    57.             transform:skew(30deg,-20deg);       /* W3C标准 */   
    58.             -ms-transform:skew(30deg,-20deg);   /* IE 9 */   
    59.             -moz-transform:skew(30deg,-20deg);  /* Firefox */   
    60.             -webkit-transform:skew(30deg,-20deg); /* Safari 和 Chrome */   
    61.             -o-transform:skew(30deg,-20deg);        /* Opera */   
    62.         }   
    63.   
    64.     </style>  
    65. </head>  
    66. <body>  
    67. <li id="container">  
    68.     <li id="li1">  
    69.         <li>translate</li>  
    70.     </li>  
    71.     <li id="li2">  
    72.         <li>rotate</li>  
    73.     </li>  
    74.     <li id="li3">  
    75.         <li>scale</li>  
    76.     </li>  
    77.     <li id="li4">  
    78.         <li>skew</li>  
    79.     </li>  
    80. </li>     
    81. </body>  
    82. </html>  
    83.   
  • 效果如下:

    制作css3动画应使用哪个样式属性(CSS3中Transform动画属性用法详解)

    transform-origin 属性

    前面我们提到的transform的方法都是基于元素的中心来变换的,也就是元素变换的基点默认是元素的中心。但是有时候我们需要在不同的位置对元素进行这些操作,那么我们就可以使用transform-origin来对元素进行基点位置改变。该属性可以接收三个参数:

    transform-origin: x-axis y-axis z-axis;
     •x-axis,表示水平方向上的取值,可以取 字符参数值left,center right,也可以取百分比,字符参数值对应的百分值为left=0%;center=50%;right=100%。
     •y-axis,表示竖直方向上的取值,还可以设置字符值top,center,bottom,也可以取百分比,字符参数值对应的百分值为top=0%;center=50%;bottom=100%。
     •z-axis,表示视图被置于 Z 轴的何处,用于3D变形中。
     
    我们可以设置基点来与之前的transform图形进行对比:

  • XML/HTML Code复制内容到剪贴板
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>transform-origin演示</title>  
    6.     <style type="text/css">  
    7.         *{   
    8.             margin: 0;   
    9.             padding: 0;   
    10.         }   
    11.         #container{   
    12.             width: 800px;    
    13.             height: 150px;    
    14.             border: 1px solid blue;    
    15.             margin: 20px auto;    
    16.             padding: 20px 20px;   
    17.         }   
    18.         #li1 ,#li2, #li3, #li4{   
    19.             height: 100px;    
    20.             width: 100px;    
    21.             border: 1px dashed red;   
    22.             display: inline-block;   
    23.         }   
    24.         #li1 li{   
    25.             height: 100px;   
    26.             width: 100px;    
    27.             background: #63F7ED;    
    28.             transform:translate(20px,10px);         /* W3C标准 */   
    29.             -ms-transform:translate(20px,10px);     /* IE 9 */   
    30.             -moz-transform:translate(20px,10px);    /* Firefox */   
    31.             -webkit-transform:translate(20px,10px); /* Safari 和 Chrome */   
    32.             -o-transform:translate(20px,10px);      /* Opera */   
    33.             transform-origin:left top;          /* W3C标准 */   
    34.             -ms-transform-origin:left top;  /* IE 9 */   
    35.             -moz-transform-origin:left top; /* Firefox */   
    36.             -webkit-transform-origin:left top; /* Safari 和 Chrome */   
    37.             -o-transform-origin:left top;       /* Opera */   
    38.         }   
    39.         #li2{margin-left: 100px;}   
    40.         #li2 li{   
    41.             height: 100px;   
    42.             width: 100px;    
    43.             background: #63F7ED;   
    44.             transform:rotate(45deg);        /* W3C标准 */   
    45.             -ms-transform:rotate(45deg);    /* IE 9 */   
    46.             -moz-transform:rotate(45deg);   /* Firefox */   
    47.             -webkit-transform:rotate(45deg); /* Safari 和 Chrome */   
    48.             -o-transform:rotate(45deg);         /* Opera */   
    49.             transform-origin:0% 0%;         /* W3C标准 */   
    50.             -ms-transform-origin:0% 0%;     /* IE 9 */   
    51.             -moz-transform-origin:0% 0%;    /* Firefox */   
    52.             -webkit-transform-origin:0% 0%;  /*Safari 和 Chrome */   
    53.             -o-transform-origin:0% 0%;      /* Opera */   
    54.         }   
    55.         #li3{margin-left: 50px;}   
    56.         #li3 li{   
    57.             height: 100px;   
    58.             width: 100px;    
    59.             background: #63F7ED;   
    60.             transform:scale(2,0.5);         /* W3C标准 */   
    61.             -ms-transform:scale(2,0.5);     /* IE 9 */   
    62.             -moz-transform:scale(2,0.5);    /* Firefox */   
    63.             -webkit-transform:scale(2,0.5); /* Safari 和 Chrome */   
    64.             -o-transform:scale(2,0.5);      /* Opera */   
    65.             transform-origin:center top;        /* W3C标准 */   
    66.             -ms-transform-origin:center top;    /* IE 9 */   
    67.             -moz-transform-origin:center top;   /* Firefox */   
    68.             -webkit-transform-origin:center top; /* Safari 和 Chrome */   
    69.             -o-transform-origin:center top;        
    70.         }   
    71.         #li4{margin-left: 150px;}   
    72.         #li4 li{   
    73.             height: 100px;   
    74.             width: 100px;    
    75.             background: #63F7ED;   
    76.             transform:skew(30deg,-20deg);       /* W3C标准 */   
    77.             -ms-transform:skew(30deg,-20deg);   /* IE 9 */   
    78.             -moz-transform:skew(30deg,-20deg);  /* Firefox */   
    79.             -webkit-transform:skew(30deg,-20deg); /* Safari 和 Chrome */   
    80.             -o-transform:skew(30deg,-20deg);        /* Opera */   
    81.             transform-origin:100% 100%;         /* W3C标准 */   
    82.             -ms-transform-origin:100% 100%;     /* IE 9 */   
    83.             -moz-transform-origin:100% 100%;    /* Firefox */   
    84.             -webkit-transform-origin:100% 100%; /* Safari 和 Chrome */   
    85.             -o-transform-origin:100% 100%;    
    86.         }   
    87.   
    88.     </style>  
    89. </head>  
    90. <body>  
    91. <li id="container">  
    92.     <li id="li1">  
    93.         <li>translate(基点为(left top)</li>  
    94.     </li>  
    95.     <li id="li2">  
    96.         <li>rotate(基点为(0%, 0%)</li>  
    97.     </li>  
    98.     <li id="li3">  
    99.         <li>scale(基点为(center, top)</li>  
    100.     </li>  
    101.     <li id="li4">  
    102.         <li>skew(基点为(100%, 100%)</li>  
    103.     </li>  
    104. </li>     
    105. </body>  
    106. </html>  
    107.   
  • 效果如下:

    制作css3动画应使用哪个样式属性(CSS3中Transform动画属性用法详解)

    对比发现:translate()方法与之前的没有区别,其他三个方法基点改变了,图形变形效果也有所变化。

    3D transform变换方法

    Internet Explorer 10 和 Firefox 支持 3D 转换.
    Chrome 和 Safari 必须添加前缀 -webkit-.
    Opera 还不支持 3D 转换(支持 2D 转换 ).

    三维变换使用基于二维变换的相同属性。CSS3中的3D变换主要包括以下几种功能函数:
     •3D位移:CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数;
     •3D旋转:CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数;
     •3D缩放:CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数;
     •3D矩阵:CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。
     
    还有以下几个转换属性:
     •transform-style: 规定被嵌套元素如何在 3D 空间中显示。
     •perspective: 规定 3D 元素的透视效果。
     •perspective-origin: 规定 3D 元素的底部位置。
     •backface-visibility: 定义元素在不面对屏幕时是否可见。
     
    目前各大主流浏览器对transform 3d属性的兼容性还不是特别好,感兴趣的读者可以自行深入了解。下面我们介绍几个常用的功能方法:

    rotateX()方法,围绕其在一个给定度数X轴旋转的元素;
    rotateY()方法,围绕其在一个给定度数Y轴旋转的元素;
    rotateZ()方法,围绕其在一个给定度数Z轴旋转的元素。

  • JavaScript Code复制内容到剪贴板
    1. <!DOCTYPE html>   
    2. <html lang="en">   
    3. <head>   
    4.     <meta charset="UTF-8">   
    5.     <title>transform 3d </title>   
    6.     <style type="text/css">   
    7.         *{   
    8.             margin: 0;   
    9.             padding: 0;   
    10.         }  
    11.         #container{   
    12.             width: 440px;    
    13.             height: 120px;    
    14.             border: 1px solid blue;    
    15.             margin: 20px auto;    
    16.             padding: 20px 20px;   
    17.         }  
    18.         #li1 ,#li2, #li3, #li4{   
    19.             height: 100px;    
    20.             width: 100px;    
    21.             border: 1px dashed red;   
    22.             display: inline-block;   
    23.         }  
    24.         #li1 li{   
    25.             height: 100px;   
    26.             width: 100px;    
    27.             background: #63F7ED;    
    28.             transform:rotateX(45deg);       /* W3C标准 */  
    29.             -webkit-transform:rotateX(45deg)); /* Safari 和 Chrome */  
    30.         }  
    31.         #li2{margin-left: 50px;}  
    32.         #li2 li{   
    33.             height: 100px;   
    34.             width: 100px;    
    35.             background: #63F7ED;    
    36.             transform:rotateY(45deg);       /* W3C标准 */  
    37.             -webkit-transform:rotateY(45deg)); /* Safari 和 Chrome */  
    38.         }  
    39.         #li3{margin-left: 50px;}  
    40.         #li3 li{   
    41.             height: 100px;   
    42.             width: 100px;    
    43.             background: #63F7ED;    
    44.             transform:rotateZ(45deg);       /* W3C标准 */  
    45.             -webkit-transform:rotateZ(45deg)); /* Safari 和 Chrome */  
    46.         }   
    47.   
    48.     </style>   
    49. </head>   
    50. <body>   
    51.     <li id="container">   
    52.         <li id="li1">   
    53.             <li>rotateX(45deg)</li>   
    54.         </li>   
    55.         <li id="li2">   
    56.             <li>rotateY(45deg)</li>   
    57.         </li>   
    58.         <li id="li3">   
    59.             <li>rotateZ(45deg)</li>   
    60.         </li>   
    61.     </li>     
    62. </body>   
    63. </html>   
    64.   
  • 下面是显示效果:

    制作css3动画应使用哪个样式属性(CSS3中Transform动画属性用法详解)

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:transform CSS3