文章目录

• 2D转换
• • 1.translate()方法
  • 2.rotate（）方法
  • 3.scale（）
  • 4.skew()
  • 5.matrix（）
  • 总结
  • 应用举例：
• 3D转换
• • 1.rotate3d(x,y,z,angle) 定义 3D 旋转
  • 2.rotateX(angle) 定义沿 X 轴的 3D 旋转。
  • 3.rotateY(angle) 定义沿 Y 轴的 3D 旋转。
  • 4.rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
  • 应用举例：

2D转换

在网页制作的过程中，我们有时会需要改变原有图形的尺寸，位置，方向等，虽然说通过改变宽和高也能实现，但是在位置与方向上的修改就显得没有那么灵活。
所以，引入了一个属性——transform来实现2D转换

1.translate()方法

translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。

2.rotate（）方法

rotate值（30deg）元素顺时针旋转30度。
正值为顺时针旋转，负值为逆时针旋转

3.scale（）

scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
先宽后高

4.skew()

skew(30deg,20deg) 元素在X轴和Y轴上倾斜30度20度。
参数为负表示向相反方向倾斜

5.matrix（）

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

总结

以上写法均为简写，以下为每一种取值

---

1. matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
2. translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
3. translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
4. translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
5. scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
6. scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
7. scaleY(n) 定义 2D 缩放转换，改变元素的高度。
8. rotate(angle) 定义 2D 旋转，在参数中规定角度。
9. skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
10. skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
11. skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

应用举例：

在网页中经常会看到一个三角形小图标，鼠标放上去之后小三角形逆置180°并且弹出二级菜单，今天，我们就利用2D转换和盒模型的简单知识来简单制作一个这样的图标。

div{
            
            border-left-color: transparent;
            border-bottom-color:transparent;
            border-top-color:yellowgreen;
            border-right-color:transparent;
            width: 0px;
            height: 0px;
            border-width:100px;
            border-style: solid;
        }
        div:hover{
            transform:rotate(180deg);
        }

鼠标放上此三角形后会变成下面的样子

3D转换

3D转换是在三维空间的转换
与三维转换相关的属性也为transform

1.rotate3d(x,y,z,angle) 定义 3D 旋转

2.rotateX(angle) 定义沿 X 轴的 3D 旋转。

3.rotateY(angle) 定义沿 Y 轴的 3D 旋转。

4.rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

应用举例：

 div{
            
            border-left-color: transparent;
            border-bottom-color:transparent;
            border-top-color:yellowgreen;
            border-right-color:transparent;
            width: 0px;
            height: 0px;
            border-width:100px;
            border-style: solid;
            /*transform:*/
        }
        div:hover{
            transform:rotateX(120deg);
           
           }

页面效果如下

鼠标放上效果如下（绕x轴旋转了120°）