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

无涯教程
18 阅读3分钟

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);

        </span><span class="com">/* Safari */</span><span class="pln">
        </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> rotate</span><span class="pun">(</span><span class="lit">20deg</span><span class="pun">);</span><span class="pln">
        
        </span><span class="com">/* Standard syntax */</span><span class="pln">
        transform</span><span class="pun">:</span><span class="pln"> rotate</span><span class="pun">(</span><span class="lit">20deg</span><span class="pun">);</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/style&gt;</span><span class="pln">



</head>


<body>
<div>
Tutorials point.
</div>


  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myDiv"</span><span class="tag">&gt;</span><span class="pln">
     Tutorials point
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">



</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); 

        </span><span class="com">/* Safari */</span><span class="pln">
        </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> rotate</span><span class="pun">(-</span><span class="lit">20deg</span><span class="pun">);</span><span class="pln">
     
        </span><span class="com">/* Standard syntax */</span><span class="pln">	
        transform</span><span class="pun">:</span><span class="pln"> rotate</span><span class="pun">(-</span><span class="lit">20deg</span><span class="pun">);</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/style&gt;</span><span class="pln">



</head>


<body>
<div>
Tutorials point.
</div>


  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myDiv"</span><span class="tag">&gt;</span><span class="pln">
     Tutorials point
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">



</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); 

        </span><span class="com">/* Safari */</span><span class="pln">
        </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> skewX</span><span class="pun">(</span><span class="lit">20deg</span><span class="pun">);</span><span class="pln">
        
        </span><span class="com">/* Standard syntax */</span><span class="pln">	
        transform</span><span class="pun">:</span><span class="pln"> skewX</span><span class="pun">(</span><span class="lit">20deg</span><span class="pun">);</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/style&gt;</span><span class="pln">



</head>


<body>
<div>
Tutorials point.
</div>


  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"skewDiv"</span><span class="tag">&gt;</span><span class="pln">
     Tutorials point
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">



</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); 

        </span><span class="com">/* Safari */</span><span class="pln">
        </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> skewY</span><span class="pun">(</span><span class="lit">20deg</span><span class="pun">);</span><span class="pln"> 
        
        </span><span class="com">/* Standard syntax */</span><span class="pln">	
        transform</span><span class="pun">:</span><span class="pln"> skewY</span><span class="pun">(</span><span class="lit">20deg</span><span class="pun">);</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/style&gt;</span><span class="pln">



</head>


<body>
<div>
Tutorials point.
</div>


  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"skewDiv"</span><span class="tag">&gt;</span><span class="pln">
     Tutorials point
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">



</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);

        </span><span class="com">/* Safari */</span><span class="pln">
        </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> matrix</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">0.3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">);</span><span class="pln"> 
        
        </span><span class="com">/* Standard syntax */</span><span class="pln">
        transform</span><span class="pun">:</span><span class="pln"> matrix</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">0.3</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">);</span><span class="pln"> 
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/style&gt;</span><span class="pln">



</head>


<body>
<div>
Tutorials point.
</div>


  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myDiv1"</span><span class="tag">&gt;</span><span class="pln">
     Tutorials point
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">



</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);

        </span><span class="com">/* Safari */</span><span class="pln">	
        </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> matrix</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">150</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">);</span><span class="pln">
        
        </span><span class="com">/* Standard syntax */</span><span class="pln">
        transform</span><span class="pun">:</span><span class="pln"> matrix</span><span class="pun">(</span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.5</span><span class="pun">,</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="lit">150</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">);</span><span class="pln"> 
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/style&gt;</span><span class="pln">



</head>


<body>
<div>
Tutorials point.
</div>


  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myDiv2"</span><span class="tag">&gt;</span><span class="pln">
     Tutorials point
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">



</body>
</html>

它将产生以下输出-

参考链接

www.learnfk.com/css/css3-2d…

avatar
文章
阅读
粉丝