css3 transform(2D转换/3D转换)

一、2D转换

通过 CSS3 transform转换，我们能够对元素进行移动、缩放、旋转、斜切等操作

1. 2D移动：translate()。使用translate()函数，你可以把元素从原来的位置移动。移动参照元素左上角原点

• 语法：translate(tx) | translate(tx,ty)
• tx是一个代表X轴（横坐标）移动的向量长度，当其值为正值时，元素向X轴右方向移动，反之其值为负值时，元素向X轴左方向移动。
• ty是一个代表Y轴（纵向标）移动的向量长度，当其值为正值时，元素向Y轴下方向移动，反之其值为负值时，元素向Y轴上方向移动。如果ty没有显式设置时，相当于ty=0。
• 也可以使用translateX(tx) 或者 translateY(ty)
• 案例示例：

div:hover{
    /*设置两个值，第一个参数表示X方向  第二个参数表示Y方向*/
    /*transform: translate(100px,100px);*/
    /*也可以只传入一个参数，表示X方向*/
    /*transform: translate(100px);*/
    /*也可以指定具体的方向,如下代码，表示Y方向正值方向上移动100px*/
    transform:translateY(100px);
}

2. 2D缩放：scale()：缩放scale()函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大.缩放是参照元素中心点。

• 语法：scale(sx|ty) | scale(sx,sy)
• sx：用来指定横向坐标（X轴）方向的缩放向量，如果值为0.01~0.99之间，会让对象在X轴方向缩小，如果值大于或等于1.01，对象在Y轴方向放大。
• sy：用来指定纵向坐标（Y轴）方向的缩放量，如果值为0.01~0.99之间，会让对象在Y轴方向缩小，如果值大于或等于1.01，对象在Y轴方向放大
• 也可以使用scaleX(sx) 或者scaleY(sy)
• 案例示例：

div:hover{
    /*传入两个值，第一个参数表示X方向的缩放 第二个参数表示Y方向上的缩放*/
    /*transform: scale(2,0.5);*/
    /*也可以只传入一个值，表示X方向和Y方向上相同的缩放*/
    /*transform: scale(2);*/
    /*也可以指定具体方向上的缩放*/
    transform: scaleX(2);
}

3. 2D旋转：rotate()：旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转

• 语法：rotate(a);
• a: 代表的是一个旋转的角度值。其取值可以是正的，也可以是负的。如果取值为正值时，元素默认之下相对元素中心点顺时针旋转；如果取值为负值时，元素默认之下相对元素中心点逆时针旋转
• 案例示例：

div:hover{
    /*传入旋转的角度，如果正值，则进行顺时针旋转*/
    /*transform: rotate(90deg);*/
    /*如果传入负值，则逆时针旋转*/
    transform: rotate(-270deg);
}

4. 2D翻转：skew()：能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状

• 语法：skew(ax) | skew(ax,ay)
• ax：用来指定元素水平方向（X轴方向）倾斜的角度。
• ay：用来指定元素垂直方向（Y轴方向）倾斜的角度。如果未显式的设置这个值，其默认为０。
• 也可以使用skewX(sx) 或者 skewY(sy)
• 案例示例：

div:hover{
    /*在X方向上倾斜30度*/
    transform: skewX(30deg);
}

}

5. 设置旋转轴心：transform-origin

• 示例：

div{
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background-color: red;
    /*添加过渡*/
    transition:all .5s;
    /*设置缩放的中心，默认是元素中心位置,现修改为元素左上角*/
    transform-origin: 0px 0px;
}
div:hover{
    transform: scale(2);
}

6. 同时设置多个transform属性（中间以空格连接）

transform:translateX(500px) rotate(90deg);

二、3D转换

三维变换使用基于二维变换的相同属性，可以让我们基于三个坐标方向对元素进行变换。和二维变形一样，三维变形可以使用transform属性来设置

1. 3D移动

• 方法：translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)
• 示例：

div:hover{
    /*Y轴移动+100px*/
    /*transform:translateY(100px);*/
    /*X轴移动100px*/
    /*transform:translateX(100px);*/
    /*x轴和Y轴方向同时移动*/
    transform:translate3d(100px,100px,0px);
}

2. 3D缩放

• scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleZ()
• 示例

div:hover{
    /*Y轴方向放大1倍*/
    /*transform: scaleX(2);*/
    /*X轴方向缩小0.5*/
    /*transform: scaleX(0.5);*/
    /*x轴和Y轴方向同时进行缩放*/
    transform: scale3d(2,0.5,1);
}

3. 3D旋转

• rotate3d(x,y,z,angle)：指定需要进行旋转的坐标轴
• rotateX(angle) 是元素依照x轴旋转；
• rotateY(angle) 是元素依照y轴旋转；
• rotateZ(angle) 是元素依照z轴旋转
• 示例：

div:hover{
    /*Y轴方向旋转45度*/
    /*transform: rotateY(45deg);*/
    /*X轴方向旋转90度*/
    /*transform: rotateX(90deg);*/
    /*x轴和Y轴方向同时进行旋转放*/
    transform: rotate3d(1,1,0,45deg);
}

三、立方体案例

利用css3 transform属性制作一个立方体

前端进阶精选：点此去