一、浅谈前端的2D、3D转换，以及动画的定义和调用（关于2D的一些操作)

一.  2 D转换 转换是C3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放 、倾斜

1、位移 语法：transfrom:translate(x,y); 简单的代码实例如下：这里我们把背景色设置成了骚粉哈哈！！！

Document

复制代码 下面对位移做一下总结：

translate最多设置2个值，第一个值是水平，第二个值是垂直。

translate偏移的位置，参照的是自身原有的位置。

translate若设置负值时，会实现逆方向移动。

若设置一个值时，只有水平方向有效。

可以设置百分比，百分比参照的是自身的大小。

2、旋转 语法：transfrom:rotate(number deg); 这里就将代码简化一下了：

.box { width: 200px; height: 200px; background: hotpink; margin:100px auto; /* 旋转 / / 顺时针旋转45度 / / transform: rotate(45deg); / / 逆时针旋转45度 / / transform: rotate(-45deg); */ }  总结一下：

单位：deg

正值：顺时针旋转

负值：逆时针旋转

旋转源点的设置：transform-origin:(水平取值：left| center| right |像素|百分比，垂直取值：top | center| bottom|像素|百分比);

3、缩放 语法：transform:scale(number,number); 代码如下：

.box { width: 100px; height: 100px; background:hotpink; margin: 200px auto; /* 缩放-放大2倍数 */ transform: scale(2) } 关于缩放的总结：

最多设置2个值，第一个值表示缩放宽度，第二值表示高度

若设置的值大于0小于1表示缩小

若大于1表示放大多少倍

若设置一个值时，表示宽高一起缩放多少倍。

4、倾斜 语法：transform:skew(number deg，number deg); 大概的代码如下：

div { width: 300px; height: 200px; background: red; margin: 100px auto; transform: skew(45deg,0deg); } 稍微总结一下：

值1表示左右倾斜

值2表示上下倾斜

单位是deg，可以是负值

希望大家都能迎娶白富美，走向人生巅峰。

转载于:https://juejin.im/post/5c98a30c6fb9a070e62d84ee