CSS3新属性----2、3D转换

谁借莪１个温暖的怀抱￠ 2022-12-04 07:46 205阅读 0赞

### 文章目录 ###

*   *  CSS3 转换
     *   *  2D转换
         *  3D转换

## CSS3 转换 ##

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。转换的效果是让某个元素改变形状，大小和位置。

### 2D转换 ###

*  **translate()** \----根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

div
    { 
    	width:100px;
    	height:75px;
    	background-color:yellow;
    	border:1px solid black;
    }
    div#div2
    { 
    	transform:translate(50px,100px);
    	-ms-transform:translate(50px,100px); /* IE 9 */
    	-webkit-transform:translate(50px,100px); /* Safari and Chrome */
    }

![在这里插入图片描述][20200906161530611.png_pic_center]

*  **rotate()** \----在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

div
    { 
    	width:100px;
    	height:75px;
    	background-color:yellow;
    	border:1px solid black;
    }
    div#div2
    { 
    	transform:rotate(30deg);
    	-ms-transform:rotate(30deg); /* IE 9 */
    	-webkit-transform:rotate(30deg); /* Safari and Chrome */
    }

![在这里插入图片描述][2020090616170768.png_pic_center]

*  **scale()** \----该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。

div { 
        margin: 150px;
        width: 200px;
        height: 100px;
        background-color: yellow;
        border: 1px solid black;
        -ms-transform: scale(2,3); /* IE 9 */
        -webkit-transform: scale(2,3); /* Safari */
        transform: scale(2,3); /* 标准语法 */
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]

*  **skew()** \----包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

> skewX():表示只在X轴(水平方向)倾斜。  
> skewY():表示只在Y轴(垂直方向)倾斜。

div
    { 
    	width:100px;
    	height:75px;
    	background-color:red;
    	border:1px solid black;
    }
    div#div2
    { 
    	transform:skew(30deg,20deg);
    	-ms-transform:skew(30deg,20deg); /* IE 9 */
    	-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
    }

![在这里插入图片描述][20200906163039709.png_pic_center]

*  **matrix()**\----有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

> matrix()方法和2D变换方法合并成一个。

div
    { 
    	width:100px;
    	height:75px;
    	background-color:red;
    	border:1px solid black;
    }
    div#div2
    { 
    	transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    	-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    	-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
    }

![在这里插入图片描述][20200906163200208.png_pic_center]

2D 转换方法

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>matrix(n,n,n,n,n,n)</td> 
   <td>定义 2D 转换，使用六个值的矩阵。</td> 
  </tr> 
  <tr> 
   <td>translate(x,y)</td> 
   <td>定义 2D 转换，沿着 X 和 Y 轴移动元素。</td> 
  </tr> 
  <tr> 
   <td>translateX(n)</td> 
   <td>定义 2D 转换，沿着 X 轴移动元素。</td> 
  </tr> 
  <tr> 
   <td>translateY(n)</td> 
   <td>定义 2D 转换，沿着 Y 轴移动元素。</td> 
  </tr> 
  <tr> 
   <td>scale(x,y)</td> 
   <td>定义 2D 缩放转换，改变元素的宽度和高度。</td> 
  </tr> 
  <tr> 
   <td>scaleX(n)</td> 
   <td>定义 2D 缩放转换，改变元素的宽度。</td> 
  </tr> 
  <tr> 
   <td>scaleY(n)</td> 
   <td>定义 2D 缩放转换，改变元素的高度。</td> 
  </tr> 
  <tr> 
   <td>rotate(angle)</td> 
   <td>定义 2D 旋转，在参数中规定角度。</td> 
  </tr> 
  <tr> 
   <td>skew(x-angle,y-angle)</td> 
   <td>定义 2D 倾斜转换，沿着 X 和 Y 轴。</td> 
  </tr> 
  <tr> 
   <td>skewX(angle)</td> 
   <td>定义 2D 倾斜转换，沿着 X 轴。</td> 
  </tr> 
  <tr> 
   <td>skewY(angle)</td> 
   <td>定义 2D 倾斜转换，沿着 Y 轴。</td> 
  </tr> 
 </tbody> 
</table>

### 3D转换 ###

*  **rotateX()**\----围绕其在一个给定度数X轴旋转的元素。

div
    { 
    	width:100px;
    	height:75px;
    	background-color:yellow;
    	border:1px solid black;
    }
    div#div2
    { 
    	transform:rotateX(120deg);
    	-webkit-transform:rotateX(120deg); /* Safari and Chrome */
    }

![在这里插入图片描述][20200906163608230.png_pic_center]

*  **rotateY()**\----围绕其在一个给定度数Y轴旋转的元素。

div
    { 
    	width:100px;
    	height:75px;
    	background-color:yellow;
    	border:1px solid black;
    }
    div#div2
    { 
    	transform:rotateY(130deg);
    	-webkit-transform:rotateY(130deg); /* Safari and Chrome */
    }

![在这里插入图片描述][20200906163646338.png_pic_center]

转换属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>transform</td> 
   <td>向元素应用 2D 或 3D 转换。</td> 
  </tr> 
  <tr> 
   <td>transform-origin</td> 
   <td>允许你改变被转换元素的位置。</td> 
  </tr> 
  <tr> 
   <td>transform-style</td> 
   <td>规定被嵌套元素如何在 3D 空间中显示。</td> 
  </tr> 
  <tr> 
   <td>perspective</td> 
   <td>规定 3D 元素的透视效果。</td> 
  </tr> 
  <tr> 
   <td>perspective-origin</td> 
   <td>规定 3D 元素的底部位置。</td> 
  </tr> 
  <tr> 
   <td>backface-visibility</td> 
   <td>定义元素在不面对屏幕时是否可见。</td> 
  </tr> 
 </tbody> 
</table>

3D转换方法

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)</td> 
   <td>定义 3D 转换，使用 16 个值的 4x4 矩阵。</td> 
  </tr> 
  <tr> 
   <td>translate3d(x,y,z) 定义 3D 转化。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>translateX(x)</td> 
   <td>定义 3D 转化，仅使用用于 X 轴的值。</td> 
  </tr> 
  <tr> 
   <td>translateY(y)</td> 
   <td>定义 3D 转化，仅使用用于 Y 轴的值。</td> 
  </tr> 
  <tr> 
   <td>translateZ(z)</td> 
   <td>定义 3D 转化，仅使用用于 Z 轴的值。</td> 
  </tr> 
  <tr> 
   <td>scale3d(x,y,z)</td> 
   <td>定义 3D 缩放转换。</td> 
  </tr> 
  <tr> 
   <td>scaleX(x)</td> 
   <td>定义 3D 缩放转换，通过给定一个 X 轴的值。</td> 
  </tr> 
  <tr> 
   <td>scaleY(y)</td> 
   <td>定义 3D 缩放转换，通过给定一个 Y 轴的值。</td> 
  </tr> 
  <tr> 
   <td>scaleZ(z)</td> 
   <td>定义 3D 缩放转换，通过给定一个 Z 轴的值。</td> 
  </tr> 
  <tr> 
   <td>rotate3d(x,y,z,angle)</td> 
   <td>定义 3D 旋转。</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td>rotateX(angle)</td> 
  </tr> 
  <tr> 
   <td>rotateY(angle)</td> 
   <td>定义沿 Y 轴的 3D 旋转。</td> 
  </tr> 
  <tr> 
   <td>rotateZ(angle)</td> 
   <td>定义沿 Z 轴的 3D 旋转。</td> 
  </tr> 
  <tr> 
   <td>perspective(n)</td> 
   <td>定义 3D 转换元素的透视视图。</td> 
  </tr> 
 </tbody> 
</table>

[20200906161530611.png_pic_center]: /images/20221123/082b79077fab44909f812ea566d74383.png
[2020090616170768.png_pic_center]: /images/20221123/aeeb68e9a1a84024a14d63ec0fe5f848.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e53250a4d8874bfca4e5e200f0ead692.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/6a0f9f77a81a4d0bbf558f0048d68d76.png
[20200906163039709.png_pic_center]: /images/20221123/07bb39580fda4ed9a356b813c78ac7f5.png
[20200906163200208.png_pic_center]: /images/20221123/30cd695512614e8a8d362dbbda185061.png
[20200906163608230.png_pic_center]: /images/20221123/1e316af668c4436684a8275c8c7d747b.png
[20200906163646338.png_pic_center]: /images/20221123/15dd774c5b6e4bd2ae3ccf1007fa803a.png