首页 前端知识 无涯教程-CSS3 - 2D转换属性

无涯教程-CSS3 - 2D转换属性

2024-03-15 10:03:58 前端知识 前端哥 379 587 我要收藏

2D变换用于在平移,旋转,缩放和倾斜时重新更改元素结构。

下表包含了用于2D转换的常用值-

Sr.No.Value & Remark
1

matrix(n,n,n,n,n,n)

用于定义具有六个值的矩阵变换

2

translate(x,y)

用于将元素与x轴和y轴一起转换

3

translateX(n)

用于沿x轴变换元素

4

translateY(n)

用于沿y轴变换元素

5

scale(x,y)

用于更改元素的宽度和高度

6

scaleX(n)

用于更改元素的宽度

7

scaleY(n)

用于更改元素的高度

8

rotate(angular)

用于基于角度旋转元素

9

skewX(angular)

用于定义偏斜变换和x轴

10

skewY(angular)

用于定义与y轴一起的偏斜变换

以下示例显示了所有上述属性的示例。

旋转20度示例

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(20deg);
            
            /* Safari */
            -webkit-transform: rotate(20deg);
            
            /* Standard syntax */
            transform: rotate(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.
      </div>
      
      <div id="myDiv">
         Tutorials point
      </div>
   </body>
</html>

它将产生以下输出-

旋转-20度示例

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(-20deg); 
         
            /* Safari */
            -webkit-transform: rotate(-20deg);
         
            /* Standard syntax */	
            transform: rotate(-20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.
      </div>
      
      <div id="myDiv">
         Tutorials point
      </div>
   </body>
</html>

它将产生以下输出-

X轴偏斜示例

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewX(20deg); 
            
            /* Safari */
            -webkit-transform: skewX(20deg);
            
            /* Standard syntax */	
            transform: skewX(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.
      </div>
      
      <div id="skewDiv">
         Tutorials point
      </div>
   </body>
</html>

它将产生以下输出-

Y轴偏斜示例

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewY(20deg); 
            
            /* Safari */
            -webkit-transform: skewY(20deg); 
            
            /* Standard syntax */	
            transform: skewY(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.
      </div>
      
      <div id="skewDiv">
         Tutorials point
      </div>
   </body>
</html>

它将产生以下输出-

矩阵变换示例

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv1 {
            /* IE 9 */
            -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
            
            /* Safari */
            -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); 
            
            /* Standard syntax */
            transform: matrix(1, -0.3, 0, 1, 0, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.
      </div>
      
      <div id="myDiv1">
         Tutorials point
      </div>
   </body>
</html>

它将产生以下输出-

矩阵以另一个方向变换。

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv2 {
            /* IE 9 */
            -ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Safari */	
            -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Standard syntax */
            transform: matrix(1, 0, 0.5, 1, 150, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.
      </div>
      
      <div id="myDiv2">
         Tutorials point
      </div>
   </body>
</html>

它将产生以下输出-

CSS3 - 2D转换属性 - 无涯教程网无涯教程网提供2D变换用于在平移,旋转,缩放和倾斜时重新更改元素结构。下表包含了用于2D转换的常用...https://www.learnfk.com/css/css3-2d-transform.html

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3810.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!