【前端学习】前端学习第八天：transform变形平移使用方法及立方体3D动画效果完整版

通过使用transform对元素进行变形等相关操作，可以使元素的效果更加生动，下面就来介绍一下transform具体的一些属性。

1、平移 translate

translateX（）：沿着x轴方向平移；

translateY（）：沿着y轴方向平移；

translateZ（）：沿着z轴方向平移。

其中，有两个特殊值：

translateX（-50%）：水平居中；

translateY（-50%）：垂直居中；

二、旋转 rotate

rotateX（）：沿着x轴方向旋转；

rotateY（）：沿着y轴方向旋转；

rotateZ（）：沿着z轴方向旋转；

当然也可以直接使用rotate（）指定角度将元素进行旋转，值为正数表示顺时针旋转，值为负数表示逆时针方向旋转。

三、缩放 scale

scaleX（）：水平方向缩放；

scaleY（）：垂直方向缩放。

也可以为其直接设置两个值，实现水平方向和垂直方向同时缩放；

立方体动画效果代码展示：

   

       

           

       

       

           

       

       

           

       

       

           

       

       

           

       

       

           

       

   

效果展示：