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

本文主要带大家深入了解transform。主要从2d和3d两个方面来了解。

2d转换 transform

可以改变 元素 在 平面上的 位置 和 形状

1. 平移
2. 旋转
3. 缩放

平移 translate

div{
    transform:translate(0px,100px);
}

特点

1. 百分比单位 是相对 自身的宽度和高度 （区别于以前的定位和margin）

   0. 子元素的在父元素 水平垂直居中

2. 平移 不像margin会挤压元素，类似定位 覆盖元素（不会脱标）

3. 实现页面效果

   0. 大的布局效果 优先用定位
   1. 微调 用margin还是 平移

旋转 rotate

可以让元素实现一个旋转的效果

1. 单位 角度 deg
2. 旋转的正方向 顺时针
3. 默认的旋转中心点 元素的中心
4. transform-origin：0 0；

缩放 scale

放大元素 或者 缩小 元素

div{
    transform:scale(2,3);
}

3d转换 transform

可以改变元素 在立体空间内 位置 和 形状

1. 3d 平移
2. 3d 旋转
3. 3d 缩放

3维坐标系

1. x轴 从左到右
2. y轴 从上到下
3. z轴 屏幕里面 指向屏幕的外面

3d平移

3d旋转

1. 看着需求 可以知道代码是怎写
2. 看着代码 可以想象到 效果怎么样

左手准则

通过左手准则 来 实现以上的两个需求

让立方体 沿着 x轴旋转

1. 伸出左手 手拇指 指向 旋转轴的正方向
2. 左手剩下的4个手指 弯曲的方向 就是 立方体旋转的方向

平移+旋转+缩放

transform: translateX(400px) rotate(45deg) scale(2,2);

3d-缩放

1. 2d缩放 缩放的div 宽度 和 高度

2. 3d缩放 缩放

   0. 普通的div 没有厚度
   1. 立方体就有厚度

小结

转换的写法