25、CSS3 2D转换

使用 transform 属性，实现图形的转换，包括旋转、平移、缩放、倾斜。

  • 平移：translate(x, y)、translateX(x)、translateY(y)
  • 旋转：rotate(angle)
  • 缩放：scale(n1, n2)、scaleX(n)、scaleY(n)
  • 倾斜：skew(angle1,angle2)、skewX(angle)、skewY(angle)

<font color = red>1) translate() 方法</font>
通过 translate() 方法，元素从其当前位置移动。
根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数改变元素的坐标位置。

<font color = red>2) rotate() 方法</font>
通过 rotate() 方法，元素顺时针旋转给定的角度。
正值，元素顺时针旋转；允许负值，元素将逆时针旋转。

<font color = red>3) scale() 方法</font>
通过 scale() 方法，元素的尺寸会增加或减少。
根据给定的宽度（X 轴）和高度（Y 轴）参数调整元素的尺寸大小。

<font color = red>4) skew() 方法</font>
通过 skew() 方法，元素翻转给定的角度。
根据给定的水平线（X 轴）和垂直线（Y 轴）参数翻转元素角度。

<font color = red>5) matrix() 方法</font>
matrix() 方法为简写属性，把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素

<font color = red>6) CSS3 transform-origin 属性</font>
语法：transform-origin: x-axis y-axis z-axis;

例

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;CSS&lt;/title&gt;
&lt;style&gt;
  div {
    width: 300px;
    height: 60px;
  }
  #div1{ 
    background: #f00;
    transform: translateX(50px) skewX(-20deg); 
  }
  #div2{ 
    background: #0f0;
    transform-origin: 100% 0%;
    transform: translate(150px,20px) rotate(-15deg) scale(1.5); 
  }
  #div3{ 
    background: #0cf;
    transform: matrix(0.866,0.5,-0.5,0.866,0,0);
  }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;div1&quot;&gt;Hello World1&lt;/div&gt;&lt;br&gt;
&lt;div id=&quot;div2&quot;&gt;Hello World2&lt;/div&gt;&lt;br&gt;
&lt;div id=&quot;div3&quot;&gt;Hello World3&lt;/div&gt;&lt;br&gt;
&lt;/body&gt;
&lt;/html&gt;

页面显示效果如下：
![ ](https://uploadfiles.nowcoder.com/images/20200603/171901592_1591171036169_DC2D36CBF71FD77F87ACE96ACE19B349 "图片标题")