开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

前言

开发过程中如果我们想要对某个元素进行平移，缩放等动画操作，首先我们就要知道CSS转换的写法。转换加动画能让页面从视觉效果上‘动’起来，比如在页面上实现一颗跳动的心，感动女朋友的一种方法，哈哈。熟练运用转换能为动画效果打下坚实的基础，今天我们就来盘一下它。

2D转换

转换分为2D跟3D,2d转换用transform表示，具体有平移、缩放等属性值。

平移

整体平移——translate(x，y)，x、y为平移的距离，可以用百分比（本身宽高的百分比）或具体的px数值： x为正，y为正——分别向右、向下平移x、y距离；x为负，y为负——分别向左边、向上平移x、y距离。 x的值跟笛卡尔坐标系的x轴对应，但y的值跟y轴刚好相反，所以如果我们想要带入坐标轴记忆需要注意y。利用transform我们可以实现元素的垂直水平居中。

    .box {
        width: 300px;
        height: 300px;
        background: orange;
        position: relative;
      }
      .item{
        width: 50px;
        height: 50px;
        background: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }

我们要理解为什么要用translate，因为用定位设置top，left各为50%，此时位于中心的是左上的那个顶点。我们想要的是元素中心位于父元素居中，所以这时候还需要把子元素向左平移边宽的一半，再向上平移高的一半，那么就需要translate(-50%,-50%)。

单项平移：translateX(x)——定义x轴方向平移距离，translateY(y)——定义y轴上的平移距离。

缩放

整体缩放——scale(x,y);x表示宽的缩放比例，y表示高的缩放比例，数值在0-1范围表示缩小。

     .box {
        width: 300px;
        height: 300px;
        background: orange;
      }
      .item{
        width: 100px;
        height: 100px;
        background: red;
        transform: scale(0.5,1.5);
      }

单项。跟translate一样，scaleX()定义宽度缩放，scaleY()定义高度缩放。

倾斜

整体倾斜——skew(n,m),n表示x轴倾斜角度，m表示y轴的倾斜角度。

    .item{
        width: 100px;
        height: 100px;
        background: red;
       transform: skew(20deg,20deg);
      }

单项。skewX(n),skewY(m)

转动

旋转——rotate(n)。rotate可以将元素旋转n角度，正整数表示顺时针旋转。

    .item{
        width: 100px;
        height: 100px;
        border-top: 5px solid white;
        background: red;
        transform: rotate(45deg);
      }

根据前面三个属性值，我们可以猜到一定有rotateX()跟rotateY(),非常好。但是这两个可不是表示2D，而是表示3D。rotateX()表示根据x轴旋转，rotateY()表示Y轴旋转。

3D转换

通过rotateX()跟rotateY()我们知道3D转换，3D转换是在2D的基础上加上了Z轴，它的复杂程度也比2D增加了好多。平移、缩放等也都有3D的效果：

3D平移——translate(x,y,z)；translateZ()表示z轴上的平移。
3D缩放——scale(x,y,z)；scaleZ()表示z轴上的缩放。
3D转动——rolate(n,m,k);rolateZ()表示z轴上的旋转。

    .box {
        width: 300px;
        height: 300px;
        background: orange;
        display: flex;
        justify-content: center;
        align-items: center;
        perspective: 500px;//一定要设置
      }
      .item{
        width: 100px;
        height: 100px;
        background: red;
        transform: rotateX(45deg);
      }

设置3D转换时，我们要为父元素设置perspective，简单理解，perspective表示的就是人眼镜离物体正前方的视觉距离，可以把此时平面当成实际生活中的正视图，当发生了转换时，我们看到的正视图就会发生改变。

总结

今天讲解了2D转换与3D转换，感兴趣的可以自行研究一下，尤其是3D转换，将平面立体化，这样子做出来的页面看起来怎么不炫酷呢？

CSS详解——转换

前言

2D转换

平移

缩放

倾斜

转动

3D转换

总结