CSS3中Transform动漫特性用法详解

日期:2020-12-10 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

css3在原先的基本上提升了形变和动漫有关的特性,动漫3弟兄:transform、transition和animation,根据应用这3个特性能够做到很酷炫的实际效果。必须留意的是这3个特性全是css3新增的特性,各大访问器适用层面还并不是非常好,应用时要非常留意访问器的适配性,本文关键详细介绍Transform的应用方式,实际內容以下

访问器适用状况:

Internet Explorer 10、Firefox、Opera 适用 transform 特性。

Internet Explorer 9 适用取代的 -ms-transform 特性(仅可用于 2D 变换)。

Safari 和 Chrome 适用取代的 -webkit-transform 特性(三d 和 2D 变换)。

Opera 只适用 2D 变换。

2D transform转换方式

•translate(x, y)方式,依据左(X轴)和顶部(Y轴)部位给定的主要参数,从当今元素部位挪动。x, y的值能够取正负,各自表明表明向不一样的方位偏位。
 •rotate(angle)方式, 表明转动angle角度。angle为正时,按顺时针角度转动,为负值时,元素逆时针转动。
 •scale(x, y)方式,表明元素在x轴和y轴上的放缩占比,主要参数超过1时,元素变大,小于1时,元素变小。
 •skew(x-angle,y-angle)方式,用来对元素开展歪曲变行,第1个主要参数是水平方位歪曲角度,第2个主要参数是竖直方位歪曲角度。在其中第2个主要参数是可选主要参数,假如沒有设定第2个主要参数,那末Y轴为0deg
 •matrix(n,n,n,n,n,n)方式, 以1个含6值的转换引流矩阵的方式特定1个2D转换,此特性值应用涉及到到数学课中的引流矩阵,感兴趣爱好的读者能够深层次掌握1下,这里就不做详尽详细介绍了。
 
下面是上面方式的演试:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  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.         #div1 ,#div2, #div3, #div4{   
  15.             height: 100px;    
  16.             width: 100px;    
  17.             border: 1px dashed red;   
  18.             display: inline-block;   
  19.         }   
  20.         #div1 div{   
  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.         #div2{margin-left: 50px;}   
  31.         #div2 div{   
  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.         #div3{margin-left: 100px;}   
  42.         #div3 div{   
  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.         #div4{margin-left: 100px;}   
  53.         #div4 div{   
  54.             height: 100px;   
  55.             width: 100px;    
  56.             background: #63F7ED;   
  57.             transform:skew(30deg,⑵0deg);       /* W3C规范 */   
  58.             -ms-transform:skew(30deg,⑵0deg);   /* IE 9 */   
  59.             -moz-transform:skew(30deg,⑵0deg);  /* Firefox */   
  60.             -webkit-transform:skew(30deg,⑵0deg); /* Safari 和 Chrome */   
  61.             -o-transform:skew(30deg,⑵0deg);        /* Opera */   
  62.         }   
  63.   
  64.     </style>  
  65. </head>  
  66. <body>  
  67. <div id="container">  
  68.     <div id="div1">  
  69.         <div>translate</div>  
  70.     </div>  
  71.     <div id="div2">  
  72.         <div>rotate</div>  
  73.     </div>  
  74.     <div id="div3">  
  75.         <div>scale</div>  
  76.     </div>  
  77.     <div id="div4">  
  78.         <div>skew</div>  
  79.     </div>  
  80. </div>     
  81. </body>  
  82. </html>  
  83.   

实际效果以下:

transform-origin 特性

前面大家提到的transform的方式全是根据元素的管理中心来转换的,也便是元素转换的基点默认设置是元素的管理中心。可是有时大家必须在不一样的部位对元素开展这些实际操作,那末大家便可以应用transform-origin来对元素开展基点部位更改。该特性能够接受3个主要参数:

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 轴的何处,用于三d形变中。
 
大家能够设定基点来与以前的transform图型开展比照:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF⑻">  
  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.         #div1 ,#div2, #div3, #div4{   
  19.             height: 100px;    
  20.             width: 100px;    
  21.             border: 1px dashed red;   
  22.             display: inline-block;   
  23.         }   
  24.         #div1 div{   
  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.         #div2{margin-left: 100px;}   
  40.         #div2 div{   
  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.         #div3{margin-left: 50px;}   
  56.         #div3 div{   
  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.         #div4{margin-left: 150px;}   
  72.         #div4 div{   
  73.             height: 100px;   
  74.             width: 100px;    
  75.             background: #63F7ED;   
  76.             transform:skew(30deg,⑵0deg);       /* W3C规范 */   
  77.             -ms-transform:skew(30deg,⑵0deg);   /* IE 9 */   
  78.             -moz-transform:skew(30deg,⑵0deg);  /* Firefox */   
  79.             -webkit-transform:skew(30deg,⑵0deg); /* Safari 和 Chrome */   
  80.             -o-transform:skew(30deg,⑵0deg);        /* 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. <div id="container">  
  92.     <div id="div1">  
  93.         <div>translate(基点为(left top)</div>  
  94.     </div>  
  95.     <div id="div2">  
  96.         <div>rotate(基点为(0%, 0%)</div>  
  97.     </div>  
  98.     <div id="div3">  
  99.         <div>scale(基点为(center, top)</div>  
  100.     </div>  
  101.     <div id="div4">  
  102.         <div>skew(基点为(100%, 100%)</div>  
  103.     </div>  
  104. </div>     
  105. </body>  
  106. </html>  
  107.   

实际效果以下:

比照发现:translate()方式与以前的沒有差别,别的3个方式基点更改了,图型形变实际效果也是有所转变。

三d transform转换方式

Internet Explorer 10 和 Firefox 适用 三d 变换.
Chrome 和 Safari 务必加上前缀 -webkit-.
Opera 还不适用 三d 变换(适用 2D 变换 ).

3维转换应用根据2维转换的同样特性。CSS3中的三d转换关键包含下列几种作用涵数:
 •三d位移:CSS3中的三d位移关键包含translateZ()和translate3d()两个作用涵数;
 •三d转动:CSS3中的三d转动关键包含rotateX()、rotateY()、rotateZ()和rotate3d()4个作用涵数;
 •三d放缩:CSS3中的三d放缩关键包含scaleZ()和scale3d()两个作用涵数;
 •三d引流矩阵:CSS3中三d形变中合2D形变1样也是有1个三d引流矩阵作用涵数matrix3d()。
 
也有下列几个变换特性:
 •transform-style: 要求被嵌套循环元素怎样在 三d 室内空间中显示信息。
 •perspective: 要求 三d 元素的透視实际效果。
 •perspective-origin: 要求 三d 元素的底位置置。
 •backface-visibility: 界定元素在不应对显示屏时是不是可见。
 
现阶段各大流行访问器对transform 3d特性的适配性还并不是非常好,感兴趣爱好的读者能够自主深层次掌握。下面大家详细介绍几个常见的作用方式:

rotateX()方式,紧紧围绕其在1个给定度数X轴转动的元素;
rotateY()方式,紧紧围绕其在1个给定度数Y轴转动的元素;
rotateZ()方式,紧紧围绕其在1个给定度数Z轴转动的元素。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  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.         #div1 ,#div2, #div3, #div4{   
  19.             height: 100px;    
  20.             width: 100px;    
  21.             border: 1px dashed red;   
  22.             display: inline-block;   
  23.         }  
  24.         #div1 div{   
  25.             height: 100px;   
  26.             width: 100px;    
  27.             background: #63F7ED;    
  28.             transform:rotateX(45deg);       /* W3C规范 */  
  29.             -webkit-transform:rotateX(45deg)); /* Safari 和 Chrome */  
  30.         }  
  31.         #div2{margin-left: 50px;}  
  32.         #div2 div{   
  33.             height: 100px;   
  34.             width: 100px;    
  35.             background: #63F7ED;    
  36.             transform:rotateY(45deg);       /* W3C规范 */  
  37.             -webkit-transform:rotateY(45deg)); /* Safari 和 Chrome */  
  38.         }  
  39.         #div3{margin-left: 50px;}  
  40.         #div3 div{   
  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.     <div id="container">   
  52.         <div id="div1">   
  53.             <div>rotateX(45deg)</div>   
  54.         </div>   
  55.         <div id="div2">   
  56.             <div>rotateY(45deg)</div>   
  57.         </div>   
  58.         <div id="div3">   
  59.             <div>rotateZ(45deg)</div>   
  60.         </div>   
  61.     </div>     
  62. </body>   
  63. </html>   
  64.   

下面是显示信息实际效果:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。